Есть ли возможность у Slick Slider синхронизировать 3 слайдера с разным контентом?
Примерно то что нужно получить (ссылка на код)
HTML
<div class="wrapper">
<div class="container">
<div class="slider-1">
<div>
<div class="slide-text">Item 1</div>
</div>
<div>
<div class="slide-text">Item 2</div>
</div>
<div>
<div class="slide-text">Item 3</div>
</div>
<div>
<div class="slide-text">Item 4</div>
</div>
<div>
<div class="slide-text">Item 5</div>
</div>
</div>
<div class="slider-2">
<div>
<div class="slide-text">Item 6</div>
</div>
<div>
<div class="slide-text">Item 7</div>
</div>
<div>
<div class="slide-text">Item 8</div>
</div>
<div>
<div class="slide-text">Item 9</div>
</div>
<div>
<div class="slide-text">Item 10</div>
</div>
</div>
<div class="slider-3">
<div class="slider-3__text">Item 1</div>
</div>
</div>
</div>
JS
const slider3Text = $('.slider-3__text');
const texts = $('.slide-text');
texts.on('click', (e) => {
console.log(e);
slider3Text.text(e.currentTarget.outerText);
});
Помогите пожалуйста. Ситуация такая. Есть 2 вертикальных слайдера с маленькими фото, они расположены рядом друг с другом. У них разный контент ( фотографии делятся по типу на 2 слайдера ). Есть большой слайдер где отображается увеличенная версия активного слайда. Вопрос состоит в том как синхронизировать 3 слайдера с разным контентом, у меня получилось сделать это для 3 слайдеров с одинаковым контентом с помощью "asNavFor".
Подскажите пожалуйста способен ли на такое Slick Slider или может есть какая то другая библиотека для vanilla js или jQuery.
Вот пример синхронизации 3 слайдеров с одинаковым контентом
Ответы (1 шт):
Пришёл к следующему: создаем два слайдера с разным контентом и вешаем клики на элементы этих двух слайдеров.
bigSlider.slick('slickGoTo', stringTypedIndex);
используем эту функцию для того, чтобы менять слайды по номеру слайдера и индексу слайда.
Осталось только продумать, как при клике на стрелочки навигации менять слайды.