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

Question

如何最好地使用slick.js实现滚动，以便当您用鼠标滚动时，它会切换到下一张幻灯片？或者有某些设置我错过了吗？

以下是我参考的内容，以防万一。 http://kenwheeler.github.io/slick/

- migs

Answer 1

您可以使用wheel事件来实现滚动，该事件在指向设备(通常是鼠标)的滚轮按钮旋转时触发。

const slider = $(".slider-item");
slider
  .slick({
    dots: true
  });

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

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

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css" />

<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script>



<div class='container'>
  <div class='slider-item'>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
    <div>
      <h3>3</h3>
    </div>
    <div>
      <h3>4</h3>
    </div>
    <div>
      <h3>5</h3>
    </div>
    <div>
      <h3>6</h3>
    </div>
  </div>
</div>

更多信息

- Ofisora

---

这个实现是可行的，但不是很好，因为滚轮事件会触发很多次，导致滑块闪烁，不太可用。 - Jeremy Quinton

@JeremyQuinton 我看不到任何闪烁。你能给我提供一个演示吗？ - Ofisora

Answer 2

我稍微修改了之前的关于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');
    }
}));

- Maxym Kopych

---

我正在使用MAC，当我滑动时，它会从one->two->three。根据它的应该是从one->two和two-three。 - questionbank

我在这里更新了代码 https://js.do/code/334612，但是我仍然遇到同样的问题。使用鼠标滚轮可以正常工作，但是没有鼠标和滚动条时就无法正常工作...它会从一跳到二、三。 - questionbank

给我一些时间来检查。 - questionbank

在使用clearTimeout(scroll)之后，它从1-2、2-3、3-4等方面完美地工作了，但滚动问题仍然不完美。比如我在第一个滑块上，我滚动时第二张图片显示在屏幕上。现在我再次滚动，然后卡住了。我连续滚动超过10次，然后第三个滑块出现并卡住了。 - questionbank

@questionbank，使用此脚本将不允许您在完全滚动之前切换到下一张幻灯片。我记得在Mac上停止滚动需要几秒钟的时间。因此，在您再次开始滚动之前，您必须等待大约2-3秒钟。因此，您需要尝试防止默认的惯性滚动。请查看此链接https://dev59.com/PV8d5IYBdhLWcg3w-mMk。希望这可以帮助您。 - Maxym Kopych

Answer 3

我想到了一种完美的实现方式，参考了 @Maxym Kopych 的回答：

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

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

    clearTimeout(blockTimeout);
    blockTimeout = setTimeout(function(){
        blocked = false;
    }, 50);

    
    if (deltaY > 0 && deltaY > prevDeltaY || deltaY < 0 && deltaY < prevDeltaY || !blocked) {
        blocked = true;
        prevDeltaY = deltaY;

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

这将防止 macOS 触发多个滚动事件，但允许用户手动重新滚动而无需等待事件完全停止。

- TheCat

---

这个非常好用！谢谢！ - margarita

太好了！在最后一张幻灯片之后，有没有办法继续滚动页面？ - belakbox

Answer 4

能否更改当前的行为，使得无论用户以多快或多慢的速度进行鼠标滚动操作，他只能进入下一张幻灯片（而不是跳转到其他幻灯片）？

对我来说，使用单个和正常的滚动操作从幻灯片1跳转到第6张幻灯片是意外的行为。

最初的回答：

- Average Joe

Answer 5

横向滚动流畅，垂直滚动页面允许:

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');
      }
    }
  }
}));

- XelfleX

Answer 6

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');
        }
    }
}));

- user2696419

---

谢谢，这个对我很有帮助。我还把 deltaX 从10改成了50，在MacOS触摸板上效果更好。谢谢！ - Isabella Monza