Прокрутка слайдера slick колесом мыши

Прокрутка слайдера slick колесом мыши

Здесь показан пример кода для слайдера Slick-Slider.

mySlider.on нужен для того, чтоб задействовать прокрутку колесом


$(document).ready(function () {
  const mySlider = $(".mySlider");
  mySlider.slick({
    arrows: false,
    speed: 500
  });
  mySlider.on("wheel", function (e) {
    e.preventDefault();
    if (e.originalEvent.deltaY < 0) {
      $(this).slick("slickPrev");
    } else {
      $(this).slick("slickNext");
    }
  });
});


.page:has(.mySlider){
  background-color: #000;
  overflow-y: hidden;
  *{
    overflow-y: hidden;
  }
  
}
.mySlider{
  
  opacity: 0;
  transition: 200ms;
  &.slick-initialized {
    opacity: 1;
  }
}
.page{
  margin: 0;
  padding: 0;
}
.mySlide{
  height: 100vh;
  position: relative;
  
}
.image{
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
}
.container{
  color: white;
  position: relative;
  z-index: 1;
}