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

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 к сайту.

Читайте также


Owl Carousel 2 nav (стрелки) и pagination (пагинация) не работает. Как включить?

Часто возникает потребность вывести nav (стрелки) и pagination (пагинацию) в Owl Carousel 2, и для многих это оказывается сложным. Что же делать, если стрелки и пагинация не работают, и как включить их у карусели Owl Carousel 2?

Назад к списку