Javascript kenwheeler/slick 如何获取当前幻灯片作为 dom 或 jquery 对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27319572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
kenwheeler/slick how to get current slide as a dom or jquery object?
提问by waffl
Using slick, I have a simple carousel along the lines of:
使用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>
I am initializing the carousel with an onAfterChangefunction to try to update the caption in another div but am a bit confused about how to get this div as a dom or jquery object?
我正在使用一个onAfterChange函数初始化轮播，以尝试更新另一个 div 中的标题，但对如何将此 div 作为 dom 或 jquery 对象感到有些困惑？
$('.carousel').slick({
lazyLoad: 'progressive',
onAfterChange: function(slider,index){
console.log(???);
}
});
Where sliderreturns the carousel object and indexreturns the current slide.
Whereslider返回轮播对象并index返回当前幻灯片。
How could I get the data-captionvalue out of this?
我怎么能从中获得data-caption价值？
回答by waffl
Arg, apologies, I found a solution on a github issue titled Accessing Current Slide Attributes in onAfterChange #411.
Arg，抱歉，我在一个名为Accessing Current Slide Attributes in onAfterChange #411的 github 问题上找到了解决方案。
sliderrefers to the carousel, so one would access the slider so:
slider指的是轮播，因此可以访问滑块，以便：
$(slider)and can access the particular slide with $(slider.$slides.get(index))
$(slider)并且可以访问特定幻灯片 $(slider.$slides.get(index))
So in reference to my question above, it would be simply:
因此，参考我上面的问题，它很简单：
$(slider.$slides.get(index)).data('caption');
回答by Miro Margalitadze
$('.SlickContainer').on('beforeChange', function(event, slick, currentSlide, nextSlide){
var CurrentSlideDom=$(slick.$slides.get(currentSlide));
var NextSlideDom=$(slick.$slides.get(nextSlide));
});
回答by Udara
try this
尝试这个
$('.carousel').on('afterChange', function() {
var dataId = $('.slick-current').attr("data-slick-index");
console.log(dataId);
});
回答by Muddasir Abbas
Before Change
变更前
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'));
});
AfterChange
更改后
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'));
});
