光滑滑块：构建比较滑块

Question

我正在构建比较滑块。

想法是，我有两个彼此相邻的滑块，每个滑块中的相同项。

然后我根据每个滑块显示的内容过滤滑块。这样，您就可以浏览两个滑块，而不会看到匹配项。

这是我到目前为止的内容：

Codepen：https://codepen.io/flinch85/pen/MWaordK

$('.slider-1').slick({
  dots: false,
  arrows: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  slidesToScroll: 1,
  easing: 'ease'
});

$('.slider-2').slick({
  dots: false,
  arrows: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  slidesToScroll: 1,
  easing: 'ease',
  initialSlide: 1
});


 $('.slider-1').on('beforeChange', function () {
     $(this).slick('slickUnfilter');
   var otherIndex =  $('.slider-2 .slick-active').attr('data-slick-index');
   $(this).slick('slickFilter', 'div:not([data-slick-index="'+ otherIndex +'"])');
 });


 $('.slider-2').on('beforeChange', function (event, slick, slides, currentSlide, nextSlide) {
   $(this).slick('slickUnfilter');
   var otherIndex =  $('.slider-1 .slick-active').attr('data-slick-index');
   $(this).slick('slickFilter', 'div:not([data-slick-index="'+ otherIndex +'"])');

 }); 

它起作用，除了第一次滑动第二个滑块外，它还会滑动回同一张幻灯片。然后，在移动相反的滑块并返回时，它将在第一次移动中重复相同的滑块。

我曾尝试将slickUnfilter功能移至beforeChange，然后将slickFilter移至afterChange。这可以工作，但会使动画混乱，因为下一个项目仅在幻灯片发生后才更改。

Answer 1

在beforeChange函数中使用此otherIndex+1

otherindex仍然引用当前元素

$('.slider-1').on('beforeChange', function () {
     $(this).slick('slickUnfilter');
   var otherIndex =  $('.slider-2 .slick-active').attr('data-slick-index');
   $(this).slick('slickFilter', 'div:not([data-slick-index="'+ otherIndex+1 +'"])');
 });

https://codepen.io/vkv88/pen/OJygEgK?editors=1010