Question

我有一个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>

使用缩略图carousal

<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以供参考

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

1 个答案: