Slick Carousel 如何将当前幻灯片作为 dom 或 jquery 对象？

Question

使用slick ，我有一个简单的轮播，大致如下：

<div class="carousel">
  <div class="image"><img src="http://path/to/image.jpg" data-caption="Caption 1"></div>
  <div class="image"><img src="http://path/to/image2.jpg" data-caption="Caption 2"></div>
  <div class="image"><img src="http://path/to/image3.jpg" data-caption="Caption 3"></div>
</div>

我正在使用onAfterChange函数初始化轮播，以尝试更新另一个 div 中的标题，但对如何将此 div 作为 dom 或 jquery 对象感到困惑？

$('.carousel').slick({
  lazyLoad: 'progressive',
  onAfterChange: function(slider,index){
    console.log(???);
  }
});

其中slider返回轮播对象， index返回当前幻灯片。

我怎么能从中得到data-caption的价值？

Answer 1

Arg，抱歉，我在题为Accessing Current Slide Attributes in onAfterChange #411的 github 问题上找到了解决方案。

slider是指轮播，因此可以访问滑块：

$(slider)并且可以使用$(slider.$slides.get(index))访问特定的幻灯片

因此，参考我上面的问题，它很简单：

$(slider.$slides.get(index)).data('caption');

Answer 2

$('.SlickContainer').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    var CurrentSlideDom=$(slick.$slides.get(currentSlide));
    var NextSlideDom=$(slick.$slides.get(nextSlide));
});

Answer 3

尝试这个

$('.carousel').on('afterChange', function() {
    var dataId = $('.slick-current').attr("data-slick-index");    
    console.log(dataId);
});

Answer 4

变更前

jQuery('.pt-slick-carousel__slides').on('beforeChange', function(event, slick, currentSlide, nextSlide){
        console.log(jQuery('.pt-slick-carousel__slides .slick-active').attr('data-slick-index'));
        console.log(jQuery('.pt-slick-carousel__slides .slick-active').attr('id'));
});

变更后

jQuery('.pt-slick-carousel__slides').on('afterChange', function(event, slick, currentSlide, nextSlide){
        console.log(jQuery('.pt-slick-carousel__slides .slick-active').attr('data-slick-index'));
        console.log(jQuery('.pt-slick-carousel__slides .slick-active').attr('id'));
});