javascript 如何在 Slick.js 中使用鼠标滚动而不是拖动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46508975/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use mouse scroll instead of drag in Slick.js?
提问by migs
What's the best way to implement scroll with slick.js so that when you scroll with your mouse, it switches to the next slide? Or is there a setting I am missing?
使用 slick.js 实现滚动的最佳方法是什么，以便当您用鼠标滚动时，它会切换到下一张幻灯片？或者我缺少什么设置？
Here is what I'm referring to, just in case. http://kenwheeler.github.io/slick/
这是我所指的，以防万一。 http://kenwheeler.github.io/slick/
回答by Ofisora
You can implement scroll by using the wheelevent which is fired when a wheel button of a pointing device (usually a mouse) is rotated.
您可以使用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/[email protected]/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/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>回答by Maxym Kopych
I little modified previous answer for Mac. Because there scroll triggering multiple times.
我几乎没有修改以前的 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');
}
}));
回答by Average Joe
Is it possible to change the current behavior so that no matter how fast or slow the user does the mouse scrolling action, he can only go to the next slide (and not jump slides )?
是否可以更改当前行为，以便无论用户的鼠标滚动动作多快或多慢，他都只能转到下一张幻灯片（而不是跳转幻灯片）？
To me, it is unexpected behavior to go from slide 1 to say slide 6 with a single and normal scroll action.
对我来说，从幻灯片 1 转到幻灯片 6 并使用单个正常滚动操作是意外的行为。
回答by user2696419
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');
}
}
}));
