Owl Carousel две или несколько каруселей на странице

Часто возникает необходимость создать две или несколько каруселей на странице сайта. Это достаточно просто сделать с помощью адаптивной карусели Owl Carousel.

С полной документацией вы можете ознакомиться на сайте разработчика, здесь же я приведу пример подключения двух или нескольких каруселей на странице. Допустим у нас есть html код слайдера:
<div class="slider">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>
Разместив его дважды на странице и задав соответствующие классы (например: slider1 и slider2), мы имеем возможность подключить Owl Carousel к каждому из них по отдельности:
$(function(){
  $('.slider1').owlCarousel();
  $('.slider2').owlCarousel();
});Этот метод легко использовать в случае размещения двух каруселей на странице, но что же делать, если необходимо подключить сразу несколько каруселей? Работать с каждой из них по отдельности не очень удобно. По этой причине мы можем перебрать на странице все элементы каруселей с помощью jQuery функции each и подключить Owl Carousel к каждому из них. Код будет примерно следующий:
$(function(){
  $('.slider').each(function(){
    $(this).owlCarousel();
  });
}); Надеюсь, что эти два метода помогут вам разобраться в принципах работы этого плагина и вы сможете подключить две или несколько карусели Owl Carousel к сайту.