如何防止Slick Slider多次点击后停止自动播放？

问题现象 #

基于Slick Carousel实现的自动播放轮播，目标为无中断持续运行，已配置禁用悬停暂停、拖动、滑动等交互属性，但多次点击轮播区域后仍出现异常：

• 自动播放意外停止
• 原本禁用的拖动功能失效，可手动拖拽轮播内容
  运行环境为WordPress，已正确加载jQuery与Slick Carousel依赖。

原有代码 #

Slick初始化配置 #

$(document).ready(() => {
 $('.clients-slider').slick({
 infinite: false,
 slidesToShow: 6,
 slidesToScroll: 1,
 autoplay: true,
 speed: 5000,
 draggable: false,
 swipe: false,
 swipeToSlide: false,
 centerMode: false,
 arrows: false,
 dots: false,
 focusOnSelect: false,
 accessibility: false,
 touchMove: false,
 pauseOnHover: false,
 pauseOnFocus: false,
 pauseOnSwipe: false, 
 cssEase: 'linear',
responsive: [
  {
    breakpoint: 1366,
    settings: {
      slidesToShow: 4
    }
  },
  {
    breakpoint: 768,
    settings: {
      slidesToShow: 3
    }
  }
],
});
});

轮播模板代码（WordPress PHP） #

<section class="clients" id="clients">
<h2 class="offer-head" style="max-width: 1300px;margin-left:auto;margin-right:auto;"><?php echo $partnerzy; ?></h2>
<div class="clients-slider" pause-on-hover="false" draggable="false">
    <?php if( have_rows('slajder_partnerzy') ): ?>
        <?php while( have_rows('slajder_partnerzy') ): the_row(); ?>
            <img  class="clients-slide-single" src="<?php echo get_sub_field('partner_logo'); ?>" alt="logo-client" />
        <?php endwhile ?>
    <?php endif ?>    
</div> 

问题根因 #

• 核心配置错误：infinite设为false时，轮播滚动到最后一帧会自然终止，不符合持续运行的需求
• 配置覆盖不全：遗漏了部分Slick内置的暂停触发配置，且部分低版本Slick存在内部bug，即使配置了暂停禁用参数，快速多次点击仍会清除自动播放定时器，导致内部状态错乱，拖动功能被异常激活
• 无效属性冗余：HTML标签上写入的pause-on-hover、draggable属于自定义属性，Slick不会读取该配置，无法生效
• 缺少兜底逻辑：没有对异常触发的暂停状态做恢复处理

修复方案 #

1. 修正初始化配置 #

将infinite改为true，补全所有交互、暂停相关的禁用配置，避免动画队列阻塞：

$(document).ready(() => {
  const $slider = $('.clients-slider');
  $slider.slick({
    infinite: true, // 核心修正：开启无限循环，否则到最后一帧会停止
    slidesToShow: 6,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 0, // 补充：关闭自动播放间隔，配合线性动画实现无缝匀速滚动
    speed: 5000,
    draggable: false,
    swipe: false,
    swipeToSlide: false,
    touchMove: false,
    touchThreshold: 1000, // 补充：调高触摸触发阈值，完全屏蔽触摸滑动
    centerMode: false,
    arrows: false,
    dots: false,
    focusOnSelect: false,
    accessibility: false,
    waitForAnimate: false, // 补充：关闭动画等待，避免快速点击导致队列阻塞
    pauseOnHover: false,
    pauseOnFocus: false,
    pauseOnSwipe: false,
    pauseOnDotsHover: false, // 补充：禁用圆点悬停暂停（兼容低版本Slick逻辑）
    cssEase: 'linear',
    responsive: [
      {
        breakpoint: 1366,
        settings: {
          slidesToShow: 4
        }
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 3
        }
      }
    ],
  });

  // 兜底交互拦截
  // 拦截所有可能触发拖动/暂停的鼠标、触摸事件
  $slider.on('mousedown touchstart click dragstart selectstart', function(e) {
    e.preventDefault();
    e.stopPropagation();
    // 交互后强制重启自动播放
    $slider.slick('slickPlay');
  });
  // 轮播初始化、每次切换后强制校验自动播放状态
  $slider.on('afterChange init', function() {
    $slider.slick('slickPlay');
  });
});

2. 清理无效HTML属性 #

删除轮播容器上无效的自定义属性，避免和浏览器原生拖拽、选中行为冲突，修正后的容器代码：

<div class="clients-slider">

3. 可选CSS彻底屏蔽交互（轮播内容无点击需求时使用） #

如果轮播仅做品牌logo展示、不需要任何点击交互，可以添加CSS彻底屏蔽指针事件，从根源上杜绝用户操作影响轮播：

.clients-slider, .clients-slider * {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

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