Slick Slider：构建比较滑块

Posted 2023-05-07

【中文标题】Slick Slider：构建比较滑块

【英文标题】：Slick Slider: building a comparison slider

【发布时间】：2020-08-12 06:59:35

【问题描述】：

我正在构建一个比较滑块。

这个想法是我有两个相邻的滑块，每个滑块都有相同的项目。

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

这是我目前所拥有的：

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。这可行，但会弄乱动画，因为下一项仅在幻灯片发生后才会更改。

【参考方案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

【讨论】：

您好，感谢您的回答，但该示例并不能解决我的问题。我不想同时在屏幕上看到相同的两个幻灯片编号。

【参考方案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"  ></div>
    <div class="slick-slide"><img data-lazy="img/slide-two.jpg"  ></div>
    <div class="slick-slide"><img data-lazy="img/slide-three.jpg"  ></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"  ></div>
       <div class="slick-slide"><img data-lazy="img/slide-two.jpg"  ></div>
       <div class="slick-slide"><img data-lazy="img/slide-three.jpg"  ></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
  );

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

谢谢！完成。