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

Question

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

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

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

Fiddle：http://jsfiddle.net/ak9Lnrjj/1/（我让它聚焦于 select，因此单击下一张或上一张幻灯片以激活该幻灯片）。

Answer 1

使用灵活的自定义事件 afterChange 和 'init' 在更改或初始化时更改任何内容。

DEMO

$('.center').on('init',function(){
    $(".slick-active").prev().removeClass('nextdiv').addClass('prevdiv');
    $(".slick-active").next().removeClass('prevdiv').addClass('nextdiv');
});
$('.center').slick({
  centerMode: true,
  centerPadding: '27%',
  focusOnSelect: true,
  slidesToShow: 1,
  arrows: false
}).on('afterChange',function(){
    $(".slick-active").prev().removeClass('nextdiv').addClass('prevdiv');
    $(".slick-active").next().removeClass('prevdiv').addClass('nextdiv');
});

Answer 2

Slick 有一个 afterChange 事件（我会 link 但文档很糟糕并且没有 links）。

还有一个 $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/

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

add class to next and previous div in carousel

javascript

css

jquery

listener

carousel