javascript - 将类添加到轮播中的下一个和上一个 div

Question

我正在使用 Slick我正在尝试将类添加到轮播中的下一张和上一张幻灯片。事件幻灯片具有 slick-active 类，所以我使用了这个:

$(".slick-active").prev().addClass('prevdiv');
$(".slick-active").next().addClass('nextdiv');

但问题是，如果我转到下一张幻灯片，类不会移动。我一直在尝试寻找解决方案，也许看到了一些关于使用 trigger & bind 的信息？

fiddle :http://jsfiddle.net/ak9Lnrjj/1/ (我让它专注于选择，所以单击下一张或上一张幻灯片以激活该幻灯片)。

Answer 1

Slick 有一个 afterChange 事件(我会链接到它，但文档很糟糕并且没有链接)。

还有一个包含所有幻灯片元素的 $slides 属性，因此可以找到当前的幻灯片元素。这也意味着在同一页面上有多个实例的情况下，我们只会更新实际发生变化的实例。

$('.center')
.on('afterChange init', function(event, slick, direction){
    console.log('afterChange/init', event, slick, slick.$slides);
    // remove all prev/next
    slick.$slides.removeClass('prevdiv').removeClass('nextdiv');

    // find current slide
    for (var i = 0; i < slick.$slides.length; i++)
    {
        var $slide = $(slick.$slides[i]);
        if ($slide.hasClass('slick-current')) {
            // update DOM siblings
            $slide.prev().addClass('prevdiv');
            $slide.next().addClass('nextdiv');
            break;
        }
    }
  }
)
.on('beforeChange', function(event, slick) {
    // optional, but cleaner maybe
    // remove all prev/next
    slick.$slides.removeClass('prevdiv').removeClass('nextdiv');
})
.slick({
  centerMode: true,
  centerPadding: '27%',
  focusOnSelect: true,
  slidesToShow: 1,
  arrows: false,
});

演示:http://jsfiddle.net/ak9Lnrjj/10/