Carousel page effect

I'm trying to do one thing at a job but I can not do anything. I need to do the following image:

Thepartofthe"and so we recommend" is retrieved via json file and displayed on the screen, there is also this paging that I saw that is done by bootstrap carousel (sorry if I'm wrong, I'm learning this now.)

Can anyone give me a light? I need to do this in Html + pure javascript, without using framework.

My problem is this pagination and the display of a list only with html and javascritpt.

In the html and javascript, I tried to put more or less this way but it is not working very well (this is an example I took)

Javascript:

$.getJSON( "products.json", function( data ) {

        // Write the data into our global variable.
        products = data;

        // Call a function to create HTML for all the products.
        generateAllProductsHTML(products);

        // Manually trigger a hashchange to start the app.
        $(window).trigger('hashchange');
    });


    // An event handler with calls the render function on every hashchange.
    // The render function will show the appropriate content of out page.
    $(window).on('hashchange', function(){
        render(decodeURI(window.location.hash));
    });

html:

<ul class="products-list">
  <script id="products-template" type="x-handlebars-template">​
    {{#each this}}
      <li data-index="{{id}}">
        <a href="#" class="product-photo"><img src="{{image.small}}" height="130" alt="{{name}}"/></a>
        <h2><a href="#"> {{name}} </a></h2>
        <ul class="product-description">
          <li><span>Manufacturer: </span>{{specs.manufacturer}}</li>
          <li><span>Storage: </span>{{specs.storage}} GB</li>
          <li><span>OS: </span>{{specs.os}}</li>
          <li><span>Camera: </span>{{specs.camera}} Mpx</li>
        </ul>
        <button>Buy Now!</button>
        <p class="product-price">{{price}}$</p>
        <div class="highlight"></div>
      </li>
    {{/each}}
  </script>
</ul>