Flickity, как сделать три слайдера, чтобы управлялись одной кнопкой?

Question

Всем привет! Подскажите пожалуйста, может кто реализовывал, не могу найти решение.

Есть слайдер в проекте Flickity. Для всех слайдеров необходимо использовать его. Есть страница сравнение, на ней будут неопределенное количество карточек для сравнения. Есть дизайн , где идет \карточка - независимый блок - \рейтинг - независимый блок - \характеристики. У \карточка есть стрелки, при нажатии на которые должны двигаться \карточка, \рейтинг, \характеристики .

Предполагаю использовать три слайдера, но не могу найти как их связать. Стрелки есть только у \карточка , у остальных стрелок не будет.

Answer 1

В Flickity есть документация в которой все описано. https://flickity.metafizzy.co/api.html

Для этого вам нужно создать кнопку к ней привязать событие нажатия в ванильном js это делается через addEventListener

После вы обращаетесь ко всем переменным с Flickity и добавляете .next();

Как ну очень простой пример:

var flkty1 = new Flickity('.carousel-1');
var flkty2 = new Flickity('.carousel-2');
var flkty3 = new Flickity('.carousel-3');
var button = document.getElementById("button")

button.addEventListener("click", function(e){
   flkty1.next()
   flkty2.next()
   flkty3.next()
})

БЛОГ НА HUSL

Flickity, как сделать три слайдера, чтобы управлялись одной кнопкой?

Ответы (1 шт):