Slick Slider как сделать несколько связанных слайдеров?

Question

[mcrack]

Здравствуйте, возникла такая проблема, не знаю как решить.

На странице может быть несколько карточек, например до 100 штук на странице, как видно по макету, там есть два связанных слайдера, но как их сделать связанными только друг с другом, но не связаннями со слайдерами других карточек?

Answer 1

[mcrack]

Вот переделал в более удобный вид вариант слайдера Ивана Винокурова, который тут написал мне ответ. Всё проверил, работают независимо.

$('.test-card').each(function(){
    /* Основной слайдер */
    $(this).find('.test-main-slider__list').slick({
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      autoplay: true,
      autoplaySpeed: 3000,
      asNavFor: $(this).find('.test-second-slider__list'),
      dots: true
    });

    /* Связанный слайдер */
    $(this).find('.test-second-slider__list').slick({
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      asNavFor: $(this).find('.test-main-slider__list'),
      dots: true
    });
  });

Answer 2

[Иван Винокуров]

let numSlick = 0;
$('.insert-gallery .main').each( function() {
  numSlick += 1;
  $(this).addClass(`gallery-main-${numSlick}`).slick({
    asNavFor: `.gallery-slides-${numSlick}`,
    infinite: false,
    // autoplay: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false
  });
});

numSlick = 0;
$('.insert-gallery .controls #gallery-prev').each( function() {
  numSlick += 1;
  $(this).addClass(`gallery-prev-${numSlick}`);
});

numSlick = 0;
$('.insert-gallery .controls #gallery-next').each( function() {
  numSlick += 1;
  $(this).addClass(`gallery-next-${numSlick}`);
});
  
numSlick = 0;
$('.insert-gallery .all').each( function() {
  numSlick += 1;
  $(this).addClass(`gallery-slides-${numSlick}`).slick({
    asNavFor: `.gallery-main-${numSlick}`,
    infinite: false,
    // autoplay: true,
    slidesToShow: 4,
    slidesToScroll: 1,
    prevArrow: `.gallery-prev-${numSlick}`,
    nextArrow: `.gallery-next-${numSlick}`
  });
});

Comments

[mcrack]

Вообще решение интересное, логику понял, но я бы сделал попроще.

Засунул бы все слайдеры одной карточки внутрь общего блока, прошёлся бы each по всем блокам и так-же всем проставил бы numSlick, можно было избавиться от лишних numSlick = 0.

А так, очень хорошее решение, жаль что в самом slik'e нет нативного решения. Спасибо большое!!!