Связь слайдов 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. Суть в том, чтобы не дать отправить форму, пока…
Рассмотрим 2 наиболее часто применяющихся примера. Для обоих примеров будет общий HTML: И общие правила…
Простой пример, как убрать стрелки в поле input[type=»number»] с помощью CSS: Важное дополнение: по прежнему…