Как менять картинки в другом блоке при смене слайда в owl carousel?

Question

[Сергей]

Предисловие:
Делаю посадку верстки на WordPress, использую ACF плагин для дополнительных полей. Для слайда у меня идут поля: Заголовок, описание и картинка. Слайдов хоть сколько может быть. Использую owl carousel для слайдера.

Проблема:
При смене слайда - должна меняться соответствующая картинка в другом блоке. Но у меня картинки просто в html добавляются друг под другом и картинки не меняются, просто показывается та картинка которая по структуре находится выше.

Answer 1

[zoozag]

owl.on('changed.owl.carousel', function(event) {
    ...
})

Можно по коллбеку смены слайда определять текущий слайд и в зависимости от этого показывать нужный .header-bg

Comments

[Сергей]

zoozag прописал следующее:

owlHeader.on('changed.owl.carousel', function(event) {
	var indexHeader = event.item.index;
	$('.wrap-slider .header-bg').fadeOut();
	$('.wrap-slider .header-bg').eq(indexHeader).fadeIn();
});

Но как то криво работает. Видать из-за того что клонируются слайды... Сейчас у меня 3 слайда

[Сергей]

zoozag это из-за loop: true из-за него счетчик неправильно идёт. Как исправить?

[zoozag]

Сергей, Я бы хранил в data-bg самого слайда номер фона или ссылку на фон.