Есть ли возможность у 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 шт):

Автор решения: Nikita

Пришёл к следующему: создаем два слайдера с разным контентом и вешаем клики на элементы этих двух слайдеров.

bigSlider.slick('slickGoTo', stringTypedIndex);

используем эту функцию для того, чтобы менять слайды по номеру слайдера и индексу слайда.

Осталось только продумать, как при клике на стрелочки навигации менять слайды.

→ Ссылка