Slick Slider：构建比较滑块

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

Answer 2

在这里，我制作了 2 个不同的旋转木马。 第一个是“一个图像”传送带，第二个是“3 个图像视图传送带”。以及“通过活动幻灯片”比较它们的 js 代码。

<div class="left-side-sec-lnd-child" id="pc-only-slide">
  <!--Main slider with only ONE main viewed image as active-->
  <!--START------------------------------>
  <div class="slider slider-single">
    <div class="slick-slide"><img data-lazy="img/slide-one.jpg" alt="" ></div>
    <div class="slick-slide"><img data-lazy="img/slide-two.jpg" alt="" ></div>
    <div class="slick-slide"><img data-lazy="img/slide-three.jpg" alt="" ></div>
  </div>
  <!--END==============================-->
</div>
<div class="right-side-sec-lnd-child">
  <div class="inside-bot-sec-lnd"style="width:100%;">
    <p class="sec-lnd-b-header">A journey not to be<br>forgotten</p>
    <!--NAV slider as child with amount of small images-->
    <!--START------------------------------>
    <div class="variable-width slider-nav" style="width:100%;">
       <div class="slick-slide"><img data-lazy="img/slide-one.jpg" alt="" ></div>
       <div class="slick-slide"><img data-lazy="img/slide-two.jpg" alt="" ></div>
       <div class="slick-slide"><img data-lazy="img/slide-three.jpg" alt="" ></div>
    </div>
  <!--END==============================-->
  </div>
 </div>

 //General carousel - big image view
  $('.slider-single').slick({
     slidesToShow: 1,
     slidesToScroll: 1,
     arrows: false,
     fade: true,
     asNavFor: '.slider-nav'
  });
  //This is for carousel what is working as nav for general carousel
  $('.variable-width').slick({
     slidesToShow: 1,
     slidesToScroll: 1,
     asNavFor: '.slider-single',
     dots: false,
     centerMode: true,
     focusOnSelect: true,
     variableWidth: true
  });