光滑的滑块 - 在 li.slick 活动点之前添加 class

Question

我有 Slick Slider (#my-slider)，我想添加 class (.past)所有 .slick-dots li 元素 before li.slick-active one.

它目前的样子

我想要它的样子

我尝试了以下方法：

(function ($) {
    jQuery(document).ready(function () {
        $('#my-slider').on('init', function(event, slick){
           var $items = slick.$dots.find('li.slick-active').prevAll();
           $items.addClass('past');
        });

        $('#my-slider').slick({
          dots: true,
          arrows: true,
          infinite: false,
          speed: 500,
          fade: true,
          autoplay: false,
          cssEase: 'linear'
        });
    });
})(jQuery);

还有这个

(function ($) {
    jQuery(document).ready(function () {
         $('#my-slider').on('init', function(event, slick){
           $('#my-slider .slick-dots li.slick-active').prevAll().addClass('past');
        });

        $('#my-slider').slick({
          dots: true,
          arrows: true,
          infinite: false,
          speed: 500,
          fade: true,
          autoplay: false,
          cssEase: 'linear'
        });
    });
})(jQuery);

但运气不好。

滑块有效，但它根本不提供过去 class。

Answer 1

您可以使用 beforeChange 光滑事件 add/remove .past 类使用 nextSlide 值在所有点上。

Note: You do not need to use jQuery(document).ready(function () { }); inside (function ($) { })(jQuery);. The first function is shorthand for doc ready, so you are calling doc ready twice. Remove jQuery(document).ready(function () { }); as it is not needed.

请参阅下面的现场演示，了解您在代码中的注释问题...

// our slick mySlider
let mySlider = $('#my-slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  adaptiveHeight: true,
  autoplay: true,
  pauseOnHover: false,
  pauseOnFocus: false,
  autoplaySpeed: 1000
});

// our mySlider dots
let dots = $('.slick-dots > LI', mySlider);

// before mySlider change slick event
mySlider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {

  // remove dot past classes on dots after next slide dot
  $(dots[nextSlide]).nextAll().removeClass('past');
  
  // add dot past classes on dots before next slide dot
  $(dots[nextSlide]).prevAll().addClass('past');
    
});

/* my-slider dots active and past css */

#my-slider .slick-dots LI.slick-active BUTTON::before,
#my-slider .slick-dots LI.slick-active BUTTON:focus {
  color: red;
  opacity: 1 !important;
}

#my-slider .slick-dots LI.past BUTTON::before,
#my-slider .slick-dots LI.past BUTTON:focus {
  opacity: 1;
}

#my-slider .slick-dots LI:not(.past) BUTTON:focus {
  opacity: .25;
}

/* my-slider demo css not needed */

BODY {
  margin: 0;
  padding: 20px;
}

#my-slider FIGURE {
  height: 120px;
  margin: 0;
  display: block;
  border: 1px solid black;
}

<div id="my-slider">
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

这里也是 fiddle 版本：https://jsfiddle.net/joshmoto/mbrs3t9v/17/

光滑的滑块 - 在 li.slick 活动点之前添加 class

Slick slider - Add class before li.slick-active dot

jquery

slick.js