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

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, либо не заданы стили для их отображения. Надеюсь, что данный пост поможет включить стрелки или пагинацию на вашем сайте.

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


Назад к списку
В отпуске до 6 июня. Для связи по важным вопросам brekot@ya.ru
×