Как получить первый и последний видимый слайд?

Question

[kachurinets]

https://codepen.io/anon/pen/qMdQvW

Есть такой слайдер. Как достучаться до первого и последнего слайда, который выдимый? Есть ли в слике подобное свойство? Нужно на первый и последний слайд ставить прозрачность.

Answer 1

[Crimsons]

Всё суть в том, что 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-х видимых элементов. Я уверен, при других условиях вы сможете сами придумать, как можно изменить/доработать это.