Owl Carousel 2 nav (стрелки) и pagination (пагинация) не работает. Как включить?
Часто возникает потребность вывести nav (стрелки) и pagination (пагинацию) в Owl Carousel 2, и для многих это оказывается сложным. Что же делать, если стрелки и пагинация не работают, и как включить их у карусели Owl Carousel 2?
Во-первых, включим их активность в JavaScript. Для этого находим код подключения карусели, прописываем свойство:
nav : true // для стрелок
pagination : true // для пагинации
Должно получиться примерно следующее: $('.slider').owlCarousel({
nav : true,
pagination : true
});
Во-вторых, необходимо задать стили.
Для стрелок это классы .owl-nav, .owl-prev и .owl-next. Где .owl-nav - общий блок для стрелок, а .owl-prev и .owl-next - сами стрелки.
Для пагинации это классы .owl-dots и owl-dot. Где .owl-dots - общий блок пагинации, а .owl-dot - сами переключатели.
Если посмотреть DOM страницы, мы увидим следующий код: <div class="slider owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer"></div>
<div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev" style="">prev</div>
<div class="owl-next" style="">next</div>
</div>
<div class="owl-dots" style="">
<div class="owl-dot"></div>
<div class="owl-dot"></div>
</div>
</div>
</div> .owl-carousel - общий контейнер слайдера;
.owl-stage-outer - контейнер, содержащий слайды;
.owl-controls - контейнер, содержащий элементы управления слайдером;
.owl-nav - nav контейнер (стрелок);
.owl-dots - pagination контейнер или контейнер пагинации (точек).
Если на вашем сайте не работают nav (стрелки) или pagination (пагинация) в Owl Carousel 2, для этого могут быть две причины: либо не задано свойство в JavaScript, либо не заданы стили для их отображения. Надеюсь, что данный пост поможет включить стрелки или пагинацию на вашем сайте.
При работе с Owl Carousel 2 у многих возникают проблемы. В данной статье я собрал частые вопросы, которые связаны с данным плагином, и постараюсь дать четкие ответы на них.
Часто возникает необходимость создать две или несколько каруселей на странице сайта. Это достаточно просто сделать с помощью адаптивной карусели Owl Carousel.