Search code examples
javascriptperformanceowl-carousel-2

OwlCarousel2 what is the best way to initialize multiple instances

I want to have 3 scrollers using owlcarousel (two of them have different options for it). What is the best (in performance meaning) practise to do this?

Solution

  • You could do this using data-attributes. Your JQuery:

    var $carousel = $(this);

$carousel.owlCarousel({
  autoplay : $carousel.data("autoplay"),
  items : $carousel.data("items"),
  loop : $carousel.data("loop")
});

    Your HTML(using different data-attributes):

    <div class="owl-carousel" data-autoplay="true">
  // Your Owl Items
</div>

<div class="owl-carousel" data-items="1" data-loop="true">
  // Your Owl Items
</div>