web-dev-qa-db-ja.com

Slick.jsでドラッグする代わりにマウススクロールを使用する方法

マウスでスクロールすると次のスライドに切り替わるように、slick.jsでスクロールを実装する最良の方法は何ですか？または、私が欠落している設定はありますか？

念のため、ここで私が言及しているのはこれです。 http://kenwheeler.github.io/slick/

javascriptscrollcarouselmouseslick.js
5
migs

ポインティングデバイス（通常はマウス）のホイールボタンが回転したときに発生する 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>

詳細

12
Ofisora

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

現在の動作を変更して、ユーザーがマウスのスクロール操作をどの程度速くまたは遅くしても、次のスライドのみに移動できるようにします（スライドをジャンプすることはできません）。

私には、スライド1からスライド6に1回の通常のスクロールアクションで移動するのは予期しない動作です。

1
Average Joe