Implementing mouse scroll in slick.js
Slick, the last carousel you’ll ever need, is a great image carousel for Javascript. Like every other carousel, you have a lot of additional functionality/features for your galleries like:
- Fully responsive. Scales with its container.
- Separate settings per breakpoint
- Uses CSS3 when available. Fully functional when not.
- Swipe enabled. Or disabled, if you prefer.
- Desktop mouse dragging
- Infinite looping.
- Fully accessible with arrow key navigation
- Add, remove, filter slides
- Autoplay, dots, arrows, callbacks, etc…
Here is a simple demo with basic features:
The above demo looks perfect but it doesn’t support changing the slides using mouse scroll. That means you have to either drag using the mouse or click on the arrow button for the next or previous slide.
But the problem is slick.js does not have the feature to change slides on mouse scroll. Let’s implement it then.
I will be using the wheel event which is fired when a wheel button of a pointing device (usually a mouse) is rotated.
const slider = $(".slider-item");
slider
.slick({
dots: true
});//Implementing navigation of slides using mouse scroll
slider.on('wheel', (function(e) {
e.preventDefault(); if (e.originalEvent.deltaY < 0) {
$(this).slick('slickNext');
} else {
$(this).slick('slickPrev');
}
}));The originalEvent.deltaY returns a value in double representing the vertical scroll amount. So if it is negative, i.e. mouse is scrolled down. slickNext navigates to the next slide and slickPrev navigates to the previous slide.
Demo:
