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 to happen afterChange。这是可行的，但会使动画混乱，因为下一项只有在幻灯片发生后才会更改。

Answer 1

在beforeChange函数中使用此otherIndex+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+1 +'"])'); });

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

Answer 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
  });