Javascript 如何在Slick.js中使用鼠标滚动而不是拖动？

使用slick.js实现滚动的最佳方法是什么，这样当您使用鼠标滚动时，它会切换到下一张幻灯片？还是我缺少一个环境

这就是我指的，以防万一。

---

您可以使用定点设备（通常是鼠标）的滚轮按钮旋转时触发的事件来实现滚动

const slider=$（“.slider项”）；
滑块
.滑头({
圆点：对
});
滑块上（'轮'，（功能（e）{
e、 预防默认值（）；
if（e.originalEvent.deltaY<0）{
$（this.slick（'slickNext'）；
}否则{
$（this.slick（'slickPrev'）；
}
}));
.container{
保证金：0自动；
填充：40px；
宽度：80%；
颜色：#333；
背景：ƣBe0；
}
.滑滑梯{
文本对齐：居中；
颜色：#419be0；
背景：白色；
}

1.
2.
3.
4.
5.
6.
我对Mac之前的答案做了一些修改。因为有多次滚动触发

var slider = $(".slider-item");
var scrollCount = null;
var scroll= null;

slider
    .slick({
        dots: true
    });

slider.on('wheel', (function(e) {
    e.preventDefault();

    clearTimeout(scroll);
    scroll = setTimeout(function(){scrollCount=0;}, 200);
    if(scrollCount) return 0;
    scrollCount=1;

    if (e.originalEvent.deltaY < 0) {
        $(this).slick('slickNext');
    } else {
        $(this).slick('slickPrev');
    }
}));

var slider=$（“.slider项”）；
var scrollCount=null；
var-scroll=null；
滑块
.滑头({
圆点：对
});
滑块上（'轮'，（功能（e）{
e、 预防默认值（）；
清除超时（滚动）；
scroll=setTimeout（函数（）{scrollCount=0；}，200）；
if（scrollCount）返回0；
滚动计数=1；
if（e.originalEvent.deltaY<0）{
$（this.slick（'slickNext'）；
}否则{
$（this.slick（'slickPrev'）；
}
}));
是否可以更改当前行为，以便无论用户执行鼠标滚动动作的速度有多快或有多慢，他都只能转到下一张幻灯片（而不是跳转幻灯片）

对我来说，从幻灯片1到幻灯片6，只进行一次正常的滚动动作，这是一种意想不到的行为。
slider.on（'wheel'），（函数（e）{
slider.on('wheel', (function(e) {
    if ( e.originalEvent.deltaX !== 0 ) {
        e.preventDefault();
        if (e.originalEvent.deltaX >= 10) {
          $(this).slick('slickPrev');
        } 
        if (e.originalEvent.deltaX <= -10) {
          $(this).slick('slickNext');
        }
    }
}));

如果（e.originalEvent.deltaX！==0）{
e、 预防默认值（）；
如果（e.originalEvent.deltaX>=10）{
$（this.slick（'slickPrev'）；
} 
如果（e.originalEvent.deltaX我以这种方式想出了@Maxym Kopych的完美实现：

let blocked=false；
让blockTimeout=null；
设prevDeltaY=0；
$（“#光滑”）。在（'mousewheel DOMMouseScroll wheel'，（功能（e）{
设deltaY=e.originalEvent.deltaY；
e、 预防默认值（）；
e、 停止传播（）；
clearTimeout（块超时）；
blockTimeout=setTimeout（函数（）{
阻塞=错误；
}, 50);
如果（deltaY>0&&deltaY>prevDeltaY | | | deltaY<0&&deltaY0）{
$（this.slick（'slickNext'）；
}否则{
$（this.slick（'slickPrev'）；
}
}
}));

它将防止触发macOS多个滚动事件，但允许用户手动重新滚动，而无需等待事件完全停止。
水平滚动slick，垂直滚动页面：

let blocked = false;
let blockTimeout = null;
let prevDeltaY = 0;

$("#slick").on('mousewheel DOMMouseScroll wheel', (function(e) {
  let deltaX = e.originalEvent.deltaX;
  let deltaY = e.originalEvent.deltaY;

  if(typeof deltaY != 'undefined') {
    clearTimeout(blockTimeout);
    blockTimeout = setTimeout(function(){
      blocked = false;
    }, 50);
  
    if ((deltaY < 1 && deltaY > -1) && ((deltaX > 10 && deltaX > prevDeltaX) || (deltaX < -10 && deltaX < prevDeltaX) || !blocked)) {
      e.preventDefault();
      e.stopPropagation();

      blocked = true;
      prevDeltaX = deltaX;

      if (deltaX > 0) {
        $(this).slick('slickNext');
      } else {
        $(this).slick('slickPrev');
      }
    }
  }
}));

let blocked=false；
让blockTimeout=null；
设prevDeltaY=0；
$（“#光滑”）。在（'mousewheel DOMMouseScroll wheel'，（功能（e）{
设deltaX=e.originalEvent.deltaX；
设deltaY=e.originalEvent.deltaY；
if（deltaY的类型！=“未定义”）{
clearTimeout（块超时）；
blockTimeout=setTimeout（函数（）{
阻塞=错误；
}, 50);
如果（（deltaY<1&&deltaY>-1）和（（deltaX>10&&deltaX>prevDeltaX）| | |（deltaX<10&&deltaX0）{
$（this.slick（'slickNext'）；
}否则{
$（this.slick（'slickPrev'）；
}
}
}
}));
这可以工作，但不是一个很好的实现，因为轮子事件触发了很多次，导致滑块闪烁，这是不可用的。@JeremyQuinton我看不到任何闪烁。你能给我一个演示吗？我正在使用MAC，当我滑动时，就像从一->二->三。根据它应该从一->二和二到三。我向上看在这里注明了代码日期和我收到的同一个问题。使用鼠标滚轮它可以工作，但是没有鼠标和滚动，那么它就不工作了。它从1跳到2-three@questionbank更新代码添加行：clearTimeout（滚动）；在-scroll=setTimeout（函数（）{scrollCount=0；}，200）；，使用clearTimeout（滚动）后给我一些时间检查.它从1-2、2-3、3-4等等都能很好地工作，但滚动问题仍然不能很好地工作。就像我在第一个滑块上滚动，然后在屏幕上显示第二个图像。现在我再次滚动，然后它被卡住了。我连续滚动超过10次，然后第三个滑块出现并卡住了。