@mcrack

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

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

На странице может быть несколько карточек, например до 100 штук на странице, как видно по макету, там есть два связанных слайдера, но как их сделать связанными только друг с другом, но не связаннями со слайдерами других карточек?5d35cb7a37342944912885.png
  • Вопрос задан
  • 105 просмотров
Решения вопроса 2
@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
    });
  });
Ответ написан
barbudour
@barbudour
ART → TECH
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}`
  });
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
iDWELL Москва
от 220 000 до 250 000 руб.
8BIT GROUP Москва
от 140 000 до 200 000 руб.
ИНФИНИТУМ Москва
от 150 000 руб.
21 авг. 2019, в 12:03
3000 руб./в час
21 авг. 2019, в 11:44
750 руб./в час
21 авг. 2019, в 11:32
1000 руб./в час