Как реализовать Slider Syncing для нескольких слайдеров?

Question

[MegaPuxapb]

На странице несколько аналогичных синхронизированных слайдеров (Slider Syncing). С одинаковыми классами: .slider-for и .slider-nav.
Само собой, при перелистывании одного, листаются остальные.
Как исправить?

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

Answer 1

[0xD34F]

Инициализируйте каждую пару слайдеров индивидуально:

$('селектор контейнеров пар слайдеров').each(function() {
  $('.slider-for', this).slick({
    ...
    asNavFor: $('.slider-nav', this),
  });

  $('.slider-nav', this).slick({
    ...
    asNavFor: $('.slider-for', this),
  });
});

Comments

[MegaPuxapb]

спасибо!