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

Question

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

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

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

如何轻松计算哪些幻灯片当前可见或不可见？ (对我来说，部分可见应该标记为隐藏)

Fiddle example

$(".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

我在这里编写代码来获取当前事件(显示)幻灯片列表，并获取计数，并在幻灯片更改时执行一些操作:Fiddle Demo

$(".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>

I use swipe event to do action when change active slick, so that you detect or update list on every swipe to your action, and other option can be access, or updated as you want dependence of swipe or any other code idea.

注意:此解决方案将根据您的需要返回当前事件的 slick 幻灯片，但不确定其是否是 slick.js 的最佳解决方案。