Как с помощью owl сделать слайдер с превьюшками под основным фото?

Question

[Олег]

В оф документации такого не нашел, но точно знаю, что так можно сделать.
Может кто-нибудь подсказать, как это можно реализовать или поделиться готовым примером?

Comments

[Евгений]

Использовать callback функции слайдера

Answer 1

[Евгений]

var slider = $(sliderSelector);
var preview_slider = $(sliderPreviewSelector);

slider.owlCarousel({
         items: 1,
         nav: false,
         dots: false,
         loop: false,
         onChanged: callback
      });
function callback(e) {
      var index = e.item.index;
       preview_slider.removeClass('active').eq(index).addClass('active');
   }

   slide_preview.click(function () {
      var index = $(this).index();
      slider.trigger("to.owl.carousel", [index, 300, true]);
   });

Comments

[Олег]

в блоке с превью какой html код в таком случае должен быть? чето вообще не пойму(((

[Евгений]

var preview_slider = $('.sliderPreviewSelector li');

Answer 2

[FeST1VaL]

Ну если нужен пример, то вот тут баннер

Правда код там ужасен... но думаю разберетесь...
А вообще вы еще намучаетесь с loop режимом, если он конечно вам потребуется...

Comments

[Евгений]

А вообще вы еще намучаетесь с loop режимом, если он конечно вам потребуется...

Никаких мучений с ним нет

[FeST1VaL]

Евгений, есть... с его клонами и index. Он делает активным не клон, а с кого склонировал. Ну короче в двух словах не объяснить... Индексы неправильно ставятся...

[Евгений]

Артем Будин, это проблема гуглится, всё норм)