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

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