Pagination effect Carousel

Question

I’m trying to do something in a job but I can’t do anything. I need to do according to the image below:

The "and so we recommend" part is recovered via json file and displayed on the screen, there is also this paging that I saw that is made by bootstrap Carousel (sorry if I’m wrong, I’m learning it now.)

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

My problem is this paging and displaying a list only with html and javascritpt.

In html and javascript, I tried to put more or less this way but it’s 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>