在Slick.js上如何计算当前可见的幻灯片？

Question

我的情况是我在100％div上显示了一些宽度可变的照片，因此它会根据浏览器的宽度进行调整。 我在centerMode中设置了slick.js，现在我想设置只是部分可见的“边缘”图像的样式。

为此，我需要知道哪些幻灯片是可见的。

我知道如果您使用slidesToShow到正确的数字，您可以设置“ slick-active”的css样式，但问题是我的容器总宽度取决于用户屏幕尺寸，并且我的幻灯片具有可变宽度，所以我不知道有多少幻灯片显示。

如何轻松计算当前看不到哪些幻灯片？ （对我而言，部分可见应标记为隐藏）

小提琴的例子

 $(".slider").slick({ focusOnSelect: true, centerMode: true, centerPadding: '10%', slidesToShow: 2, arrows: false, infinite: true, variableWidth: true }); 

 .slider div { padding: 0 8px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css"> <div class="slider"> <div><img src="https://via.placeholder.com/300x200"></div> <div><img src="https://via.placeholder.com/400x200"></div> <div><img src="https://via.placeholder.com/100x200"></div> <div><img src="https://via.placeholder.com/250x200"></div> <div><img src="https://via.placeholder.com/300x200"></div> <div><img src="https://via.placeholder.com/400x200"></div> </div> 

Answer 1

您可以使用slick.js响应方法为主要断点进行正确的样式设置。 我最近不得不这样做，在某些断点上，我必须关闭centerMode并更改可见的图像数量，以便您可以随时控制可见的图像数量。 如果您需要查看我使用的代码示例，希望对您有所帮助！

Answer 2

我在此处编写代码以获取当前活动（显示）的幻灯片列表，并获取数量，并在更改幻灯片时执行一些操作： Fiddle演示

 $(".slider").slick({ focusOnSelect: true, centerMode: true, centerPadding: '10%', slidesToShow: 2, arrows: false, infinite: true, variableWidth: true, }); doMyAction($(".slider").slick('slickCurrentSlide')); $(".slider").on('swipe', function(event, slick, direction){ doMyAction($(".slider").slick('slickCurrentSlide')); }); function doMyAction(currentSlick){ // your acction for current slick console.log('Current Slick:', currentSlick); } console.log(getActiveSlickLength()); function getActiveSlickLength() { return $('.slick-active').length; } console.log(getActiveSlickIndexList()); function getActiveSlickIndexList() { var indexes = []; $.each($('.slick-active'), function(key, value){ indexes[key] = $(value).data('slick-index'); }); return indexes; } 

 .slider div { padding: 0 8px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css"> <div class="slider"> <div><img src="https://via.placeholder.com/300x200"></div> <div><img src="https://via.placeholder.com/400x200"></div> <div><img src="https://via.placeholder.com/100x200"></div> <div><img src="https://via.placeholder.com/250x200"></div> <div><img src="https://via.placeholder.com/300x200"></div> <div><img src="https://via.placeholder.com/400x200"></div> </div> 

当更改活动滑条时，我使用滑动事件来执行操作，这样您就可以在每次滑动中检测或更新列表以进行操作，并且可以访问或更新其他选项，因为您希望依赖滑动或任何其他代码提示。

注意：此解决方案将根据需要返回当前活动的光滑幻灯片，但不能确定是否使用slick.js是最佳解决方案。