Добавление пользовательского класса в слайдер Slick в виде увеличения числа - PullRequest
Новая
       9

Добавление пользовательского класса в слайдер Slick в виде увеличения числа

0 голосов
/ 28 августа 2018

Как добавить пользовательский класс в скользящий слайдер, как показано ниже 

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

Примечание. Я передаю этот код с другого сайта. Может быть, это неправильно, я просто показывая, что я сделал.

enter image description here

1 Ответ

0 голосов
/ 29 августа 2018

Предполагая, что вам нужен пользовательский селектор для каждого из текущих активных слайдов X, он должен это сделать ( CodePen здесь ): 

$("#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"] и т. Д.

...