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

Question

我正在使用Slick，并且正在尝试向轮播中的下一张和上一张幻灯片添加类。活动幻灯片有类 slick-active，所以我使用了这个：

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

但问题是，如果我转到下一张幻灯片，类就不会移动。我一直在寻找解决方案，并且看到了一些有关使用触发器和绑定的信息？

小提琴：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/