Question

我正在使用Slick而我正在尝试将类添加到我的轮播中的下一张和上一张幻灯片中。活动幻灯片具有浮动活动类，因此我使用了这个：

$(".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/

Answer 2

使用光滑的自定义事件afterChange和＆＃39; init＆＃39;改变或改变任何东西。

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');
});

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

2 个答案: