如何实现Slick Slider持续自动播放，点击箭头/点时快速切换？

问题核心 #

你设置的speed: 6000会同时作用于自动播放滚动和手动触发的切换（箭头/切换点），导致手动操作时切换过慢。需要让自动播放保持慢速滚动，手动触发时立即跳转。

解决方案 #

通过监听Slick的手动切换事件，临时修改动画速度，切换完成后恢复原速度：

$(document).ready(function(){
  const slider = $('.test').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1,
    speed: 6000,
    dots: true,
    cssEase: 'linear',
    waitForAnimate: false,
    pauseOnFocus: false, 
    pauseOnHover: false
  });

  // 监听箭头点击事件
  $('.slick-prev, .slick-next').on('click', function() {
    slider.slick('slickSetOption', 'speed', 0, true);
  });

  // 监听切换点点击事件
  $('.slick-dots li').on('click', function() {
    slider.slick('slickSetOption', 'speed', 0, true);
  });

  // 切换完成后恢复原速度
  slider.on('afterChange', function() {
    slider.slick('slickSetOption', 'speed', 6000, true);
  });
});

代码说明 #

• 点击箭头或切换点时，调用slickSetOption将speed临时设为0，实现立即跳转
• afterChange事件触发时（切换完成后），把speed恢复为6000，保证自动播放的慢速滚动不受影响
• 第三个参数true表示立即应用配置，不需要重新初始化

完整代码示例 #

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<style>
.slick-prev:before,
.slick-next:before 
{
    color: black!important;
}
</style>

<div style='margin-left:20px;width:200px;color:black!important;'>
    <div class='test'>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>

<script>
$(document).ready(function(){
  const slider = $('.test').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1,
    speed: 6000,
    dots: true,
    cssEase: 'linear',
    waitForAnimate: false,
    pauseOnFocus: false, 
    pauseOnHover: false
  });

  $('.slick-prev, .slick-next').on('click', function() {
    slider.slick('slickSetOption', 'speed', 0, true);
  });

  $('.slick-dots li').on('click', function() {
    slider.slick('slickSetOption', 'speed', 0, true);
  });

  slider.on('afterChange', function() {
    slider.slick('slickSetOption', 'speed', 6000, true);
  });
});
</script>

内容的提问来源于stack exchange，提问作者Kida