JavaScript
jQuery
slick

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