javascript - 获取 SLICK SLIDER 的当前幻灯片并将类添加到内部元素

Question

我有一个 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');                 
                });

但是不工作，我的代码有什么问题，有没有办法让它正常工作

Answer 1

改变你的beforeChange函数如下

$('.slideshow').on('beforeChange', function(event, slick, currentSlide, nextSlide){
      $(".slick-slide").removeClass('works');
      $('.slick-current').addClass('works');        
   });

请查找dis fiddle供大家引用