В общем, идея такая, слайдер листается и где-то рядом возле него меняются картинки в блоке, или фоновые картинки, или еще какие-то связанные со слайдами элементы.
Подробнее про настройку и использование карусели Owl Carousel можно почитать в моей статье Создание карусели/слайдера с помощью плагина Owl Carousel 2.
Пример реализации связи слайдов owl-carousel с элементами соседнего блока .visuals
:
See the Pen Owl Carousel third-party sync by Denis (@deniscreative) on CodePen.dark
Что мы видим на примере – когда листается слайдер, то в блоке ниже для элементов .visual-bg
соответствующих номеру активного слайда добавляется класс .active
.
Отслеживаем все изменения в слайдере с помощью события 'changed.owl.carousel'
.
И при этом получаем номер активного слайда с помощью переменной page
:
var page = event.page.index;
Обратите внимание, что event.page.index
не будет работать, если у вас отключена навигация dots
в слайдере (по умолчанию она включена), то есть, не должно быть dots: false
.
И затем при изменении состояния слайдера, у всех элементов .visual-bg
убираем класс active
, находим нужный элемент, который по счету будет таким же как и активный слайд .eq(page)
и ему присваивается класс active
.