Связь слайдов 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.

Скопировать текст в буфер обмена нажатием на кнопку

Задача простая — копировать текст из какого-то блока нажатием кнопки, например, это может быть код…

Валидация email с помощью javaScript

Простая валидация email с помощью javaScript. Суть в том, чтобы не дать отправить форму, пока…

2 способа прижать футер к нижней части страницы (подходит для IE10 & Edge)

Рассмотрим 2 наиболее часто применяющихся примера. Для обоих примеров будет общий HTML: И общие правила…

Убрать стрелки в input[type=»number»] с помощью CSS

Простой пример, как убрать стрелки в поле input[type=»number»] с помощью CSS: Важное дополнение: по прежнему…

Ответить