如何在Slick Carousel中获取活动中的幻灯片元素

Question

滑动转盘：http://kenwheeler.github.io/slick/

如何获取活动中幻灯片的元素？例如：

   .on('afterChange', function (slick, currentSlide)
   {
      var currentSlideElement = //Get current slide element here
   });

第一个参数似乎是event对象，但它的target（或currentTarget）始终是幻灯片容器，第二个参数看起来是光滑的对象。。。。

Answer 1

您需要包括第一个参数"event"，如

$('.your-element').on('afterChange', function(event, slick, currentSlide){
  console.log(currentSlide);
});    

否则，您的"currentSlide"参数将是"光滑的"

Answer 2

在'afterChange'事件中获取DOM元素：

$('.your-element').on('afterChange', function (event, slick, currentSlide) {
    var elt = slick.$slides.get(currentSlide);
});

Answer 3

// Get the current slide
var currentSlide = $('.your-element').slick('slickCurrentSlide');

来源：https://github.com/kenwheeler/slick

Answer 4

如果同时显示多张幻灯片，'currentSlide'参数将无法按预期工作。

我在这个例子中找到的方法是使用添加到当前幻灯片中的"slick current"类。

例如，slider是用于carousel的HTML元素包装器：

$('.your-element').on('afterChange', function(event, slick, currentPage){
    var currentIndex = parseInt(slider.querySelector('.slick-current').getAttribute('data-slick-index'));
});