滑动条-从左向右和从右向左移动时添加类名称

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>