如何在Slick.js中使用鼠标滚动而不是拖动? [英] How to use mouse scroll instead of drag in Slick.js?

问题描述

用slick.js实现滚动的最佳方法是什么，以便用鼠标滚动时切换到下一张幻灯片?还是有我缺少的设置?

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?

这里是我指的，以防万一. http://kenwheeler.github.io/slick/

Here is what I'm referring to, just in case. http://kenwheeler.github.io/slick/

推荐答案

您可以使用

You can implement scroll by using the wheel event which is fired when a wheel button of a pointing device (usually a mouse) is rotated.

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>

更多信息

这篇关于如何在Slick.js中使用鼠标滚动而不是拖动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！