Как при использовании Slick Slider'а сделать крайние элементы с другим класом?

134

31 января 2022, 09:30

Есть идея добавить класс к боковому элементу:

// который будет добавлять сверху прозрачный сероватый слой.

.grd:before{
    content: '';
    display: block;
    background: #9b9b9ba3;
    top: 0;
    width: 100%;
    height: 100%;
}

Известно что у центрального элемента слайдера есть класс slick-current, а также у соседних есть slick-active и у него самого.

Пробовал добавлять этот класс с помощью next(), но получилось так только с одним элементом, и при этом когда я клацал слайдер ( меняются классы видимых слайдов ), а класс не изменялся. Всё дело в динамических элементах DOM?

// настройки слайдера

$('.slider').slick({
         infinite: true,
         slidesToShow: 3,
         centerMode: true
});

Answer 1

$('.slick-arrow').on('click', function(){
        var nExt = $('.slick-current').next().next();
        var pRev = $('.slick-current').prev().prev();
        $('.slick-active').removeClass('grd');
        nExt.addClass('grd');
        pRev.addClass('grd');
})

Сделал таким не хитрым способом сработало