我有一个 Slick slider ,就像 slick 页面中显示的示例一样,我正在使用这样的代码,
<div class="slideshow">
<img src="http://lorempixel.com/500/250" />
<img src="http://lorempixel.com/500/251" />
<img src="http://lorempixel.com/500/249" />
</div>
带有缩略图的轮播
<div class="thumbs">
<img src="http://lorempixel.com/100/100/" />
<img src="http://lorempixel.com/100/100/" />
<img src="http://lorempixel.com/100/100/" />
</div>
现在的 Js 代码是这样的:
$('.slideshow').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.thumbs'
});
$('.thumbs').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slideshow',
dots: true,
centerMode: true,
focusOnSelect: true
});
这工作正常,但我想要实现的是在当前拇指幻灯片上我想添加一些东西,比如类,或者在当前拇指的内部元素上(这里例如:img)。
我试过这样的代码:
$('.thumbs').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('.slick-current img').addClass('works');
});
但是不工作,我的代码有什么问题,有没有办法让它正常工作
最佳答案
改变你的beforeChange
函数如下
$('.slideshow').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$(".slick-slide").removeClass('works');
$('.slick-current').addClass('works');
});
请查找dis fiddle供大家引用
关于javascript - 获取 SLICK SLIDER 的当前幻灯片并将类添加到内部元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43042581/