category slider

In this extension, we need to add all categories on the Home page with scroller ( owl carousel).

For getting all the categories, we have an inbuild function called SC.CATEGORIES

var slidercat=SC.CATEGORIES[0].categories;

On the template we have loaded the owl carousel script

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<div class="headingsec">
  <div class="headerslider">
    <span class="headingpro">Our Products</span>
    <div class="customNavigation">
      <a class="slidericon prev"><i class="icon-angle-left  testing"></i></a>
      <a class="slidericon next"><i class="icon-angle-right testing"></i></a>
    </div>
  </div>
  <div class="owl-carousel owl-theme carouselstyle" id="owl-carousel">
    {{#each SliderCat}}
    <a href="{{fullurl}}">
      <div class="card123 item">
        <div class="wrapper">
          <!-- <div class="colorProd"></div> -->
          <div class="imgProd">
            <img src="{{thumbnailurl}}" alt="" />
          </div>
          <div class="infoProd">
            <p class="nombreProd">{{name}}</p>
          </div>
        </div>
      </div>
    </a>
    {{/each}}
  </div>
</div>
<script>
  function loadScript(url, callback) {
    var script = document.createElement("script")
    script.type = "text/javascript";
    if (script.readyState) { // only required for IE <9
      script.onreadystatechange = function () {
        if (script.readyState === "loaded" || script.readyState === "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function () {
        callback();
      };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
  }
loadScript('https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', function () {
    var owl = $("#owl-carousel");
    owl.owlCarousel({
      loop: false,
      margin: 20,
      responsive: {
        0: {
          items: 2,
          margin: 20,
        },
        767: {
          items: 4,
          margin: 20,
        },
        1200: {
          items: 5,
          margin: 20,
        }
      }
    });
    $(".next").click(function () {
      owl.trigger('next.owl.carousel');
    })
    $(".prev").click(function () {
      owl.trigger('prev.owl.carousel', [300]);
    })
  })
</script>