Как отметить классом первый и последний слайд, активный в данный момент в Slick Slider?

Question

Имеется слайдер на библиотеке slick slider.
Требуется отметить первый и последний слайд, который виден на данный момент, разными классами: .slick-active-left и .slick-active-right.

$('.main-slider').slick({
            arrows: true,
            dots: true,
            slidesToShow: 4,
   });

.slide{
  font-size: 13px;
  z-index: 999; 
  height: 50px;
}

<div class="main-slider">
  <div class="slide">Первый слайд</div>
  <div class="slide">Второй слайд</div>
  <div class="slide">Третий слайд</div>
  <div class="slide">Четвертый слайд</div>
  <div class="slide">Пятый слайд</div>
<div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />

БЛОГ НА HUSL

Как отметить классом первый и последний слайд, активный в данный момент в Slick Slider?

Ответы (0 шт):