jquery-光滑的滑块

joshmoto 2020-11-29 10:45:14

你可以使用beforeChangeslick事件，.past使用该nextSlide值在所有点上添加/删除类。

注意：你不需要使用jQuery(document).ready(function () { });inside (function ($) { })(jQuery);。第一个功能是doc ready的简写，因此你要两次调用doc ready。删除， jQuery(document).ready(function () { });因为它是不需要的。

请参阅下面的实时演示，以了解你在代码中带有注释的问题...

// 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>

这也是小提琴版本：https : //jsfiddle.net/joshmoto/mbrs3t9v/17/

Majurac 2020-11-29 19:32:04

谢谢你。就像一个魅力：) beforeChange和nextSlide的组合完成了工作。也感谢您对“文档准备就绪”的说明。

joshmoto 2020-11-29 19:36:51

不用担心，css焦点会在活动的暂停状态下造成严重破坏，但这也涵盖了这一点。

jquery-光滑的滑块

(jquery - Slick slider)

热门帖子

热门github