Question

我希望解决Slick滑块的一个小问题。

我想做的是，一旦激活当前幻灯片，就向其添加一个类。当滑块加载时，这也将包括第一张幻灯片。一旦滑块移至下一张幻灯片，则在动画播放后将添加类。

我想它更像是一个类切换，而不仅仅是添加一个类。

$('.latest-slider').slick({
infinite: true,
slidesToShow: 1,
speed:800,
slidesToScroll: 1,
autoplay: false,
arrows:false,
centerMode: true,
}); 

// On after slide change
$('.latest-slider > .slick-slide').on('afterChange', function(event, slick, currentSlide){
$(this).toggleClass('active-class');
});

这是我尝试过的方法，但似乎不起作用。有人可以提供任何建议吗？

编辑

$('.latest-slider .slick-slide').on('afterChange', function(event, slick, currentSlide, nextSlide){
  $(currentSlide).removeClass('fancy-class');
  $(nextSlide).addClass('fancy-class');
  //console.log(nextSlide);
});

Answer 1

滑动滑块为此具有一个beforeChange回调。

<div class="your-class">
    <div>
        <img src="https://image.shutterstock.com/display_pic_with_logo/2402987/467823860/stock-photo-table-with-food-top-view-467823860.jpg">
    </div>
    <div>
        <img src="https://i.kinja-img.com/gawker-media/image/upload/s--U4p7aVXr--/c_scale,f_auto,fl_progressive,q_80,w_800/cqjqqduljubkqkglhgrz.jpg">
    </div>
    <div>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-d0Umq4tB7JWvT6U3JmqKBmyqCwtSokJTKM9eor38ITZUyoP8OA">
    </div>
</div>

$('.your-class').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    $(".your-class").find('div').removeClass("current-slide");
    $(".your-class").find('div').eq(nextSlide).addClass("current-slide");
});

Answer 2

这是解决方案。

overflow: scroll

使用Slick Slider将类添加到当前幻灯片

2 个答案: