在Slick滑块中添加自定义类，例如数量增加

Question

如何在光滑的滑块中添加自定义类，例如以下结构

<div class="slick-slide">...</div>
<div class="slick-slide">...</div>
<div class="slick-slide slick-active slick-slide1">...</div>
<div class="slick-slide slick-active slick-slide2">...</div>
<div class="slick-slide slick-active slick-slide3">...</div>
<div class="slick-slide slick-active slick-slide4">...</div>
<div class="slick-slide slick-active slick-slide5">...</div>
<div class="slick-slide">...</div>
<div class="slick-slide">...</div>

我只需要将类添加到活动滑块（“ .slick-active”）。并且需要在更改幻灯片时更改类。

我正在使用以下代码，但是它不起作用。

$(".slider").slick({
    dots: false,
    arrows : true,
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 1,
    speed: 500
});

$('.slider').on({beforeChange: function (event, slick, current_slide_index, next_slide_index) {
   $('.slick-slide').removeClass('slick-main-active');
   $('.slick-slide[data-index=' + next_slide_index + ']').addClass('slick-main-active');
}})

  

注意：我从另一个站点引用此代码。可能这是错误的，我   只是展示我的所作所为。

Answer 1

假设您要为当前X张活动幻灯片中的每张幻灯片使用自定义选择器，则应该这样做（CodePen here）：

$("#test").on("init", function(event, slick) {
    addCustomSlickAttributes();
})

$("#test").slick({
    dots: false,
    arrows : true,
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 1,
    speed: 500
})

$("#test").on("afterChange", function(event, slick, current_slide_index, next_slide_index) {
    addCustomSlickAttributes();
})

function addCustomSlickAttributes() {
    // Remove old attributes
    $("[data-my-slick-attr]").removeAttr("data-my-slick-attr");

    // Iterate through each active slide and add our custom attribute
    $(".slick-active").each(function(index, el) {
        $(el).attr("data-my-slick-attr", index);
    })
}

然后可以使用[data-my-slick-attr="0"]，[data-my-slick-attr="1"]等来定位活动元素。