How to set up linked slick slider?

Question

Slick

Tell me how to make the second slider always show one slide more than the first? That is, the first shows slide 1, the second shows slide 2, not 1. and so on.

Answer 1

Instead of using asNavFor, handle slide transition events and toggle the adjacent slider:

const $slider1 = $('.slider-nav').slick({
  ...
}).on('beforeChange', function(e, slick, currSlide, nextSlide) {
  $slider2.slick('slickGoTo', nextSlide + 1);
});

const $slider2 = $('.slider-for').slick({
  ...
}).on('beforeChange', function(e, slick, currSlide, nextSlide) {
  $slider1.slick('slickGoTo', nextSlide - 1);
});