Slider Syncing for multiple sliders?

Question

JavaScript

There are several similar synchronized sliders on the page (Slider Syncing). With the same classes: .slider-for and .slider-nav.
Of course, when you scroll through one, the rest scroll through.
how to fix?

$('.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

Initialize each pair of sliders individually:

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

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