kenwheeler/slick如何将当前幻灯片作为dom或jquery对象获取？

Question

使用光滑,我有一个简单的旋转木马:

<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,道歉,我在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);
});