Всё суть в том, что slick имеет встроенные события, с помощью которых мы можем вызывать функцию каждый раз, когда это событие возникает. Код нужно добавить
после инициализации вашего слайдера.
//Добавляем всем элементам прозрачность
$('.slick-slide').addClass('slick-slider-opacity');
//Убираем прозрачность у центральных элементов
$('.slick-slide.slick-active').eq(1).removeClass('slick-slider-opacity');
$('.slick-slide.slick-active').eq(2).removeClass('slick-slider-opacity');
//Вешаем обработчик на событие слайдера
$(".rio-promos").on("afterChange", function() {
//Добавляем прозрачность всем элементам, обнуляя её у нужных
$('.slick-slide').addClass('slick-slider-opacity');
$('.slick-slide.slick-active').eq(1).removeClass('slick-slider-opacity');
$('.slick-slide.slick-active').eq(2).removeClass('slick-slider-opacity');
});
CSS код
.slick-slide {
transition: 0.5s opacity linear;
}
.slick-slider-opacity {
opacity: 0.5;
}
Работать такой код будет только для 4-х видимых элементов. Я уверен, при других условиях вы сможете сами придумать, как можно изменить/доработать это.
Простой
Простой