如何在slick滑块滑动过程中禁用mousewheel触发的幻灯片切换？

我来帮你搞定这个问题！核心思路是利用Slick提供的切换前后事件设置一个状态标记，当滑块处于滑动过程中时，直接跳过滚轮触发的切换操作。具体实现步骤如下：

• 先定义一个状态变量，用来标记滑块是否正在滑动
• 监听Slick的beforeChange事件，滑块开始切换时将状态设为「正在滑动」
• 监听Slick的afterChange事件，滑块切换完成后重置状态为「未滑动」
• 在滚轮事件处理函数中，先判断当前滑动状态，再决定是否执行切换操作

以下是修改后的完整代码：

// 定义状态变量，标记滑块是否处于滑动中
let isSliding = false;

function detectScroll() {
  $('body').bind('mousewheel', function(e){
    // 只有当滑块未在滑动时，才响应滚轮操作
    if (!isSliding) {
      if(e.originalEvent.wheelDelta / 120 > 0) {
        $('.slickSlider').slick('slickPrev');
      } else {
        $('.slickSlider').slick('slickNext');
      }
    }
  });
}

$('.slickSlider').slick({
  vertical: true,
  verticalSwiping: true,
  autoplay: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  dots: false,
  infinite: false
})
// 滑块开始切换时，标记为滑动状态
.on('beforeChange', function() {
  isSliding = true;
})
// 滑块切换完成后，重置滑动状态
.on('afterChange', function() {
  isSliding = false;
});

detectScroll();

这样调整后，当滑块正在执行切换动画时，滚轮操作就不会触发新的切换请求，完美避免了操作冲突！

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