Slick Carousel鼠标悬停时立即停止滚动的实现方法

你的问题出在：pauseOnHover: true只会暂停后续的自动播放，但当前正在执行的滚动动画（因speed设为13000）会继续完成才停止。直接重新初始化修改speed不会中断正在进行的动画，所以没效果。

正确的处理方式是：

• 鼠标悬停时，立即终止当前滚动动画，同时暂停自动播放
• 鼠标离开时，恢复原speed并重启自动播放

修改后的代码如下：

$('.my_slider').slick({
   slidesToShow: 5,
   slidesToScroll: 1,
   autoplay: true,
   autoplaySpeed: 1,
   speed: 13000,
   pauseOnHover: false, // 关掉默认暂停逻辑，自定义控制
   cssEase: 'linear',
   dots: false,
   infinite: true,
   adaptiveHeight: true,
   arrows: false,
}).on('mouseenter', function(){
   const $slider = $(this);
   // 暂停自动播放
   $slider.slick('slickPause');
   // 立即终止当前滚动动画，直接跳转到动画终点
   $slider.find('.slick-track').stop(true, true);
   // 临时将speed设为0，避免后续启动时出现延迟
   $slider.slick('slickSetOption', 'speed', 0, true);
}).on('mouseleave', function(){
   const $slider = $(this);
   // 恢复原speed值
   $slider.slick('slickSetOption', 'speed', 13000, true);
   // 重启自动播放
   $slider.slick('slickPlay');
});

关键说明： #

• pauseOnHover: false：禁用默认的悬停暂停机制，避免和自定义逻辑冲突
• $('.slick-track').stop(true, true)：直接终止滑块轨道的动画，两个true分别代表清除未执行的动画队列、强制跳转到动画结束状态
• slickSetOption：Slick官方提供的动态修改配置的方法，第三个参数true表示设置立即生效

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