Как добавить дополнительную пагинацию к слайдеру?

Question

[GreenMan1899]

Должна быть стандартная+еще одна с совершенно других стилем. Как ее добавить, чтобы она работала параллельно с основной?
Можно ли добавить свои элементы и инициализировать их, как это делается с элементами навигации.
Я использую слайдер Owl

Answer 1

[Михаил]

В Owl можно на любой элемент повесить событие перелистывания слайдов. Так, что смело верстайте какую угодно пагинацию и делайте например так:

var owl = $(".owl-carousel");
owl.owlCarousel(sliderOptions);

$(".prev-slide").click(function() {
  owl.trigger('prev.owl.carousel');
});

$(".next-slide").click(function() {
  owl.trigger('next.owl.carousel');
});

Или обратитесь к документации

Для навигации к конкретному слайду можно использовать event to.owl.carousel
К примеру:

<ul class="owl-pagination">
   <li class="owl-pagination__item"></li>
   <li class="owl-pagination__item"></li>
   <li class="owl-pagination__item"></li>
</ul>

var owl = $(".owl-carousel");
owl.owlCarousel(sliderOptions);
$(".owl-pagination__item").click(function() {
  var position = $(this).index();
  // если нужно ставим тут класс .active элементу по которому кликнули и снимаем у остальных
  owl.trigger("to.owl.carousel", [position, 500]);
});

Comments

[GreenMan1899]

это навигация, а спрашивал про пагинацию

[Михаил]

GreenMan1899: о какой тогда пагинации в Owl идет речь, о которой даже в документации не написано. То, что я написал и является для Owl пагинацией

[Михаил]

GreenMan1899: А сорри, понял, вы говорите про точки по которы можно сразу к нужному слайду переходить?

[GreenMan1899]

Михаил: именно

[Михаил]

GreenMan1899: дополнил ответ