Slick: Feature Request: Mouse wheel support

[dubcanada]

It would be awesome if we would get mouse wheel support, so you can mouse over the element and scroll with the mouse wheel.

[kenwheeler]

Fair enough. Let me see if I can get my hands some a scroll wheel for testing.

[navaru]

Oh Wheeler no love for the mouse wheel.. :(

Any progress?

If not, I'll take a stab at it using jquery-mousewheel (npm).

[kenwheeler]

Lol! I literally have no access to one to test with. I can throw some example code your way to get the party started. Email me.

[FlashJunior]

An Example of "owlcarousel" http://www.owlcarousel.owlgraphic.com/demos/mousewheel.html

[aesfer]

Using jquery-mousewheel (http://github.com/brandonaaron/jquery-mousewheel):

$('#myDiv').slick({
    // ...
}).mousewheel(function(e) {
    e.preventDefault();

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

[simeydotme]

You do not want to get involved in this mire. I've experienced first hand the devastation that can be wrought upon oneself trying to implement this. Trackpads/Magic Mice fire hundreds of scroll events , you end up with a sluggish UX by throttling the events, and also capture the user in an element which they can't scroll past with their wheel/trackpad

best to leave it to users to implement themselves.

[kenwheeler]

good call @simeydotme

[sajanmullappally]

Posting an update since some of the methods has changed in the newer slick versions..

For 1.5.9 version
Include https://github.com/jquery/jquery-mousewheel

  var myCarousel= $('#myDiv');
  myCarousel.slick({
   /*Options Here*/
  });

  myCarousel.mousewheel(function(e) {
    e.preventDefault();

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

[Ansif]

@sajanmullappally Super! :+1:

[chiraggmodi]

I have applied above solution for mousewheel and it working nicely, but the issue i am facing is, when slider reach to last slide, it is not scroll page to down, so there is no way to scroll down from slider.
I have kept option to infinite:false and if i put this to true it goes to 1 slide.

Any help will be appreciated.

[simeydotme]

@sajanmullappally can you help @chiraggmodi out, just do a check for infinite , if false, and currentSlide === slideCount then don't prevent default (also opposite for scrolling up)

[chiraggmodi]

@simeydotme and @sajanmullappally this is code where currently i am working on

var slickCarousel= $('.serviceSlider');
    slickCarousel.slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        autoplay: false,
        dots:true,
        infinite:false,
        adaptiveHeight: true,
    });


    slickCarousel.mousewheel(function(e) {
e.preventDefault();
        if (e.deltaY < 0) {
            $(this).slick('slickNext'); 
        }
        else {
            $(this).slick('slickPrev');
        }
    });

[oktav777]

A bit changed the code from top, will scroll up/down when reaching first/last slide.

Settings:

$('.your-slick').slick({
  infinite: false,
  vertical: true
})

Code:

$('.your-slick').mousewheel(function(e) {
  if (e.deltaY < 0) {
    if($(this).slick('slickCurrentSlide') == $(this).find('.slide').length - 1) {
      return
    }

    e.preventDefault()
    $(this).slick('slickNext')
  } else {
    if($(this).slick('slickCurrentSlide') == 0) {
      return
    }

    e.preventDefault()
    $(this).slick('slickPrev')
  }
});

[Grawl]

slick.mousewheel() is not available anymore. Any workarounds?

[Grawl]

Okay I just find an answer on StackOverflow that allows me to change slides on “desktop” mouse “wheel” scrolling (currently my MacBook trackpad).

Here's a working demo using fresh Slick: https://codepen.io/Grawl/pen/mMLQQb

[Grawl]

@kenwheeler why not to include this as an option?

[GregJacoby]

@oktav777 hi Octavian, thanks so much for your code there. It works perfectly except when getting to the bottom of the slideshow it stops and won't scroll the page - I've been playing with it a bit and can't seem to get it to work. any ideas?

I fixed this just now by changing

if($(this).slick('slickCurrentSlide') == $(this).find('.slide').length - 1)

to

if($(this).slick('slickCurrentSlide') == $(this).find('.slick-slide').length - 1)

[vitorluis]

You can use it without mousewheel plugin.
https://stackoverflow.com/questions/46508975/how-to-use-mouse-scroll-instead-of-drag-in-slick-js