在 Slick 滑块中添加自定义 class，如数字递增

Question

如何在如下结构的光滑滑块中添加自定义 class

<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>

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

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

$(".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');
}})

Note: I refer this code from another site. May be this is wrong, i just showing what i did.

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"] 等定位活动元素

在 Slick 滑块中添加自定义 class，如数字递增

Adding custom class in Slick slider like increment in number

html

javascript

jquery

slider

slick.js