时间戳

首页 > 解决方案 > 在 Slick.js 上如何计算当前可见的幻灯片？

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

问题描述

我的情况是我在 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>

标签： javascriptjqueryslick.js

解决方案

我在这里编写代码以获取当前活动（显示）幻灯片列表，并获取计数，并在幻灯片更改时执行一些操作：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>

我在更改活动 slick 时使用 swipe 事件来执行操作，以便您检测或更新每次滑动到您的操作的列表，并且可以访问或更新其他选项，因为您希望依赖滑动或任何其他代码想法。

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

推荐阅读