How to get first and last visible slide?

Question

css

https://codepen.io/anon/pen/qMdQvW
There is such a slider. How to reach the first and last slide that is visible? Does the slick have a similar property? You need to put transparency on the first and last slide.

Answer 1

The whole point is that slick has built-in events with which we can call a function every time this event occurs. The code needs to be added after the initialization of your slider.

//Добавляем всем элементам прозрачность
$('.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 code

.slick-slide {
  transition: 0.5s opacity linear;
}
.slick-slider-opacity {
  opacity: 0.5;
}

Such code will work only for 4 visible elements. I'm sure under other conditions you will be able to figure out how you can change / modify this.