Select Page

Implementing mouse scroll in slick.js

 

Slick, the last carousel you’ll ever need, is a great image carousel for Javascript. Like every other carousels, 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 & unfilter slides
  • Autoplay, dots, arrows, callbacks, etc…

Here is a simple demo with basic features:

See the Pen Slick js default by Sagar Shrestha (@webisora) on CodePen.

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:

See the Pen Implementing mouse scroll in slick.js by Sagar Shrestha (@webisora) on CodePen.

1 Comment

  1. BrusFillis

    Big thanks, man

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *