В общем, идея такая, слайдер листается и где-то рядом возле него меняются картинки в блоке, или фоновые картинки, или еще какие-то связанные со слайдами элементы.
Подробнее про настройку и использование карусели 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.