Прокрутка слайдера slick колесом мыши
Здесь показан пример кода для слайдера Slick-Slider.
mySlider.on нужен для того, чтоб задействовать прокрутку колесом
JavaScript
$(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");
}
});
});CSS
.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;
}