javascript - 在 Slick slider 中添加自定义类，例如数量增量

Question

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

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

我需要仅向事件 slider 添加类(“.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');
}})

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"]等