javascript - 光滑 slider : building a comparison slider

Question

我正在构建一个比较 slider 。

我的想法是，我有两个相邻的 slider ，每个 slider 中都有相同的项目。

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

这是我到目前为止所拥有的:

代码笔: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 +'"])');

 }); 

它可以工作，只是当您第一次滑动第二个 slider 时，它会滑回到同一张幻灯片。当移动相反的 slider 并返回时，它将在第一次移动时重复相同的幻灯片。

我尝试将 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