slick.js マウススクロールでスライドを送れるようにする

概要

カルーセルを簡単に作れるライブラリ、slick.jsをマウスホイール/トラックパッドのスクロールに対応させたのでメモ。

実装

app.js

var $carousel = $('.js-carousel');

// slickの初期化
$carousel.slick({
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      });

// スクロールイベントの監視
$carousel.on('wheel', function(e) {
  e.preventDefault();

  if (!$carousel.hasClass('js-slick-moving')) {
    if (e.originalEvent.deltaY < 0) {
      $(this).slick('slickNext');
    } else {
      $(this).slick('slickPrev');
    }
  }
})

// スライド送り中を判定するためにクラスを付与する
$carousel.on('beforeChange', function(){
  $carousel.addClass('js-slick-moving');
});

$carousel.on('afterChange', function(){
  $carousel.removeClass('js-slick-moving');
});