Связь слайдов owl-carousel с другими блоками

В общем, идея такая, слайдер листается и где-то рядом возле него меняются картинки в блоке, или фоновые картинки, или еще какие-то связанные со слайдами элементы.

Подробнее про настройку и использование карусели 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.