Slick slider - добавление имени класса при перемещении слева направо и справа налево

Question

С помощью следующего слайдера я могу перемещать слева направо (lft) и справа налево (rtl). Я хочу добавить два разных имени класса для rtl и lft направление движения.

Кто-нибудь поможет мне добиться этого. Если у вас есть какие-либо сомнения, просто прокомментируйте для получения дополнительной информации.

Скрипт, который я пробовал:

var dir;
if(dir=='right')
{
    $('.slick-active').addClass('right-effect');
}
if(dir=='left')
{
    $('.slick-active').addClass('left-effect');
}

console.clear();

$(".slider").slick({
    // autoplay: true,
    dots: true,
    arrows: false,
	slidesToShow: 2,
	slidesToScroll: 2
});

html, body {
	 background: #102131;
	 color: white;
}
 .container {
	 padding: 30px;
}
 .test-case-wrap {
	 margin-bottom: 60px;
}
 .slick-slider {
	 background: #3a8999;
	 font-size: 30px;
	 line-height: 1;
	 text-align: center;
	 color: white;
}
 .slick-slider .slick-dots button:before, .slick-slider .slick-dots .slick-active button:before {
	 color: rgba(255, 255, 255, .85);
}
 .slick-slider .slick-slide {
	 background: #3a8999;
	 padding: 40px 0;
}
 .slick-slider .slick-slide:nth-child(odd) {
	 background: #e84a69;
}
 .slick-track {
	 display: flex;
}
 .slick-track .slick-slide {
	 display: flex;
	 height: auto;
	 align-items: center;
	 justify-content: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<div class="container">
  <div class="slider">
    <div>Lorem ipsum dolor sit amet</div>
    <div>slide 1</div>
    <div>slide 2</div>
    <div>slide 3</div>
    <div>slide 4</div>
    <div>slide 5</div>
  </div>
</div>

Answer 1

Вы можете добавить click() события в навигацию ползунка следующим образом:

$(".slider").slick({
    dots: false,
	slidesToShow: 2,
	slidesToScroll: 2
});
$(".slick-prev").on("click", function() {
   $('.slick-active').removeClass('right-effect');
   $('.slick-active').addClass('left-effect');
});
$(".slick-next").on("click", function() {
   $('.slick-active').removeClass('left-effect');
   $('.slick-active').addClass('right-effect');
});

html, body {
	 background: #102131;
	 color: white;
}
 .container {
	 padding: 30px;
}
 .test-case-wrap {
	 margin-bottom: 60px;
}
 .slick-slider {
	 background: #3a8999;
	 font-size: 30px;
	 line-height: 1;
	 text-align: center;
	 color: white;
}
 .slick-slider .slick-dots button:before, .slick-slider .slick-dots .slick-active button:before {
	 color: rgba(255, 255, 255, .85);
}
 .slick-slider .slick-slide {
	 background: #3a8999;
	 padding: 40px 0;
}
 .slick-slider .slick-slide:nth-child(odd) {
	 background: #e84a69;
}
 .slick-track {
	 display: flex;
}
 .slick-track .slick-slide {
	 display: flex;
	 height: auto;
	 align-items: center;
	 justify-content: center;
}
.right-effect {
  background-color:red !important;
}
.left-effect {
  background-color:blue !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<div class="container">
  <div class="slider">
    <div>Lorem ipsum dolor sit amet</div>
    <div>slide 1</div>
    <div>slide 2</div>
    <div>slide 3</div>
    <div>slide 4</div>
    <div>slide 5</div>
  </div>
</div>

Обновление: как упоминалось в качестве комментария, ползунок используется не с «предыдущим» и «следующим» ползунком навигации, а с точкой навигация. Для точечной навигации должен работать следующий подход:

 $(".slick-dots li").on("click", function() {
    let current = $(this).index();
    let previous = $(".slick-dots").attr("data-previous") ? $(".slick-dots").attr("data-previous") : 0;
    if (current > previous) {
       $('.slick-active').removeClass('left-effect');
       $('.slick-active').addClass('right-effect');
    } else if (current < previous) {
       $('.slick-active').removeClass('right-effect');
       $('.slick-active').addClass('left-effect');
    }
    $(".slick-dots").attr("data-previous", $(this).index());
 });