スライダーの上でマウスホイールを動かすとスクロールする方法【slick】

Question

スライダープラグイン「slick.js」を使用して、スライドを作成しました。
このスライダーの上でマウスホイールを動かすとスライダーがスクロールされる実装を試みていますが、なかなかうまくきません。

分からない事

なにが原因でマウスホイールでスクロールしないのか分かっていません。
下記が現在のコードです。

<div class="slide">
	<div class="js-carousel"><a href="#"><img src="https://placehold.jp/fff/250x250.png" alt="画像１"></a></div>
	<div class="js-carousel"><a href="#"><img src="https://placehold.jp/250x250.png" alt="画像２"></a></div>
	<div class="js-carousel"><a href="#"><img src="https://placehold.jp/fff/250x250.png" alt="画像３"></a></div>
	<div class="js-carousel"><a href="#"><img src="https://placehold.jp/250x250.png" alt="画像４"></a></div>
	<div class="js-carousel"><a href="#"><img src="https://placehold.jp/fff/250x250.png" alt="画像５"></a></div>
	<div class="js-carousel"><a href="#"><img src="https://placehold.jp/250x250.png" alt="画像６"></a></div>
	<div class="js-carousel"><a href="#"><img src="https://placehold.jp/fff/250x250.png" alt="画像７"></a></div>
	<div class="js-carousel"><a href="#"><img src="https://placehold.jp/250x250.png" alt="画像８"></a></div>
</div>
<script>
$('.slide').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 0,
    speed: 4500,
    arrows: false,
    swipe: true,
    cssEase: 'linear',
responsive: [{
    breakpoint: 768,
    settings: {
      slidesToShow: 3
    }
}]
});


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

// スクロールイベントの監視
$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');
});
</script>

.slide img {
	width: 100%;
	transition: all 0.3s ease 0s;
	height: 60vh;
	object-fit: cover;
}
.slide img:hover{
	opacity: 0.8;
}

.slick-slide{
	height: 60vh;
	object-fit: cover;
}

slick.jsを使用された事のある方、是非教えていただければと思います。
よろしくお願いします。

【参考サイト】slick.js マウススクロールでスライドを送れるようにする

Answer 1

thisに入っているものが期待しているものと違うのではありませんか？

    if (e.originalEvent.deltaY < 0) {
      $(this).slick('slickNext');
    } else {
      $(this).slick('slickPrev');
    }

↓

    if (e.originalEvent.deltaY < 0) {
      $('.slide').slick('slickNext');
    } else {
      $('.slide').slick('slickPrev');
    }

Comments

[satoshickkk]

ご回答ありがとうございます。
おっしゃる通り.slideに変更したら無事に動きました。
ありがとうございました。