Как связать две owl-carousel?

Question

[Scalletta]

Задача сделать подобный слайдер:


Большая картинка - активный слайд.
Маленькие картинки - слайды этого же слайдера.

Лента из слайдов листается и выбирается нужный слайд, листая большую картинку листаются также слайды ниже.
Есть слайдер SlickSlider, у него создается два слайдера и они связываются между собой. Но заказчику нужен OwlSlider2, гуглю гуглю, ничего найти не могу. В доках такую функцию не вижу. Как реализовать эту задачу?

Answer 1

[lodas]

Проще переделать слайдер на slick, там есть юзабельное решение вашей проблемы. Делаются 2 слайдера:

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

где asNavFor: - привязка слайдеров с друг другом.

Answer 2

[Дима Долготер]

Тупой вопрос, пробовал взять два слайдера и убрать из второго стрелочки и id одинаковые поставить?)

Comments

[Scalletta]

DDolgy у большого слайдера активный только один слайд, у маленького слайдера активны 9

Answer 3

[Alexander Pushkarev]

Связывать их можно через https://owlcarousel2.github.io/OwlCarousel2/docs/a... но реализацию придётся писать самому