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

Question

从下面的滑动滑块我可以从左到右(lft)和从右到左(rtl)移动。我想为 rtl 和 lft 方向移动添加两个不同的 class 名称。

任何人都可以帮助我实现这一目标。如果您有任何疑问，请发表评论以获取更多信息。

我试过的脚本：

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>

更新：如评论所述，滑块不与 "previous" 和 "next" 滑块导航一起使用，而是与点导航一起使用。对于点导航，以下方法应该有效：

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

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

Slick slider - Add class name when moving left to right and right to left

javascript

html

jquery

css

slick.js