光滑滑块 - 从左到右和从右到左移动时添加类名

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());
});