Slick滑块点击前后箭头后自动播放失效问题及修复需求

嘿，这个问题我做项目时也碰到过！Slick滑块默认逻辑就是：当用户手动触发切换（比如点击前后箭头、切换底部dots，甚至用键盘导航）时，会自动暂停自动播放。要实现点击箭头后仍保持自动播放，咱们只需要在手动切换后重新启动自动播放就行，下面给你两种靠谱的解决方案：

方案一：监听切换完成事件（推荐） #

这种方法覆盖所有手动切换场景，不管用户用箭头、dots还是键盘操作，只要切换完成就重新开启自动播放，代码也更简洁：

jQuery(document).ready(function ($) {
  var $slider = $('.slider');
  if ($slider.length) {
    $slider.slick({
      slidesToShow: 7,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 1500,
      // 可选：如果需要鼠标悬停/焦点时也不暂停，就加上这两行
      pauseOnHover: false,
      pauseOnFocus: false,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            // 你的其他响应式配置...
          }
        }
        // 其他断点配置...
      ]
    })
    // 监听滑块切换完成事件，重新启动自动播放
    .on('afterChange', function(event, slick) {
      slick.slickPlay();
    });
  }
});

方案二：直接监听箭头点击事件 #

如果你只需要处理箭头点击的场景，可以单独监听箭头的点击事件：

jQuery(document).ready(function ($) {
  var $slider = $('.slider');
  if ($slider.length) {
    $slider.slick({
      slidesToShow: 7,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 1500,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            // 你的其他响应式配置...
          }
        }
        // 其他断点配置...
      ]
    })
    // 点击前后箭头后重新启动自动播放
    .on('click', '.slick-prev, .slick-next', function() {
      $slider.slick('slickPlay');
    });
  }
});

补充说明 #

• 如果你不需要滑块在鼠标悬停时暂停，可以加上pauseOnHover: false；不需要焦点暂停就加pauseOnFocus: false，根据你的需求调整即可。
• 第一种方案覆盖场景更全面，所以更推荐使用。

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