How to use mouse scroll instead of drag in Slick.js?

Question

What's the best way to implement scroll with slick.js so that when you scroll with your mouse, it switches to the next slide? Or is there a setting I am missing?

Here is what I'm referring to, just in case. http://kenwheeler.github.io/slick/

Ofisora · Answer 1 · 2018-06-25T02:48:35.113

You can implement scroll by 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
  });

slider.on('wheel', (function(e) {
  e.preventDefault();

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

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css" />

<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script>



<div class='container'>
  <div class='slider-item'>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
    <div>
      <h3>3</h3>
    </div>
    <div>
      <h3>4</h3>
    </div>
    <div>
      <h3>5</h3>
    </div>
    <div>
      <h3>6</h3>
    </div>
  </div>
</div>

More Info

This works but is not a great implementation as the wheel event fires lots of times causing the slider to flicker as is not really usable. — Jeremy Quinton, Nov 05 '18 at 19:27
@JeremyQuinton I cannot see any flicker. Can you provide me a demo? — Ofisora, Nov 05 '18 at 23:28

Maxym Kopych · Answer 2 · 2019-07-17T21:48:47.833

9

I little modified previous answer for Mac. Because there scroll triggering multiple times.

var slider = $(".slider-item");
var scrollCount = null;
var scroll= null;

slider
    .slick({
        dots: true
    });

slider.on('wheel', (function(e) {
    e.preventDefault();

    clearTimeout(scroll);
    scroll = setTimeout(function(){scrollCount=0;}, 200);
    if(scrollCount) return 0;
    scrollCount=1;

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

edited Jul 17 '19 at 21:48

answered Dec 18 '18 at 22:57

Maxym Kopych

91
2
5

I am using MAC and when I swipe then it's going like from one ->two-> three. According to it's should go from one->two and two-three. – questionbank Jul 16 '19 at 06:29
2

I updated the code here https://js.do/code/334612 and the Same issue I am getting. Using mouse wheel it's working but without mouse and scroll then it's not working.. it jumps from one-two-three – questionbank Jul 18 '19 at 06:22
@questionbank update code add line: clearTimeout(scroll); before - scroll = setTimeout(function(){scrollCount=0;}, 200); – Maxym Kopych Jul 18 '19 at 18:09
,Give me some time to check – questionbank Jul 19 '19 at 03:37
After using clearTimeout(scroll);. It's working perfectly from a one-two, two-three, three-four and so on but scroll issue is still not working perfectly. Like I am on the first slider and I scroll then second image displaying on the screen. Now I am scrolling again then it's stuck. I am scrolling continuously more than 10 times then the third slide coming and stuck. – questionbank Jul 19 '19 at 05:26
I asked one question here https://stackoverflow.com/questions/57041277/how-to-slide-owl-carousel-slider-and-slick-slider-using-the-mouse-wheel-and-mac – questionbank Jul 19 '19 at 05:45
@questionbank with this script it's not gonna let you to switch to next slide until scrolling completely done. And how I remember on mac it's taking few second to stop scrolling. So you have to wait like 2-3 sec before you gonna start scrolling again. So you want to try to prevent default momentum scrolling. take a look at this https://stackoverflow.com/questions/26235878/how-to-disable-inertial-scrolling-on-body-for-ios-browsers. Hopefully this will help – Maxym Kopych Jul 19 '19 at 09:27

score 3 · Answer 3 · answered Oct 13 '20 at 11:45

I came up with a perfect implementation of @Maxym Kopych answer this way:

let blocked = false;
let blockTimeout = null;
let prevDeltaY = 0;

$("#slick").on('mousewheel DOMMouseScroll wheel', (function(e) {
    let deltaY = e.originalEvent.deltaY;
    e.preventDefault();
    e.stopPropagation();

    clearTimeout(blockTimeout);
    blockTimeout = setTimeout(function(){
        blocked = false;
    }, 50);

    
    if (deltaY > 0 && deltaY > prevDeltaY || deltaY < 0 && deltaY < prevDeltaY || !blocked) {
        blocked = true;
        prevDeltaY = deltaY;

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

It will prevent macOS multiple scroll events from firing, but it will allow the user to rescroll manually without waiting for the events to completely stop.

This is great! Is there a way to continue scrolling the page after the last slide? — belakbox, Jun 15 '22 at 15:44

score 2 · Answer 4 · answered Feb 14 '19 at 08:29

Is it possible to change the current behavior so that no matter how fast or slow the user does the mouse scrolling action, he can only go to the next slide (and not jump slides )?

To me, it is unexpected behavior to go from slide 1 to say slide 6 with a single and normal scroll action.

user2696419 · Answer 5 · 2020-05-08T12:25:28.750

1

slider.on('wheel', (function(e) {
    if ( e.originalEvent.deltaX !== 0 ) {
        e.preventDefault();
        if (e.originalEvent.deltaX >= 10) {
          $(this).slick('slickPrev');
        } 
        if (e.originalEvent.deltaX <= -10) {
          $(this).slick('slickNext');
        }
    }
}));

edited May 08 '20 at 12:25

answered May 08 '20 at 11:47

user2696419

11
2

Thanks, thats working great for me. I changed also deltaX from 10 to 50 and this working better with MacOS trackpad. Thanks! – Isabella Monza Apr 27 '23 at 09:57

score 1 · Answer 6 · answered Feb 25 '21 at 19:29

Scroll slick horizontally, allow page scroll vertically:

let blocked = false;
let blockTimeout = null;
let prevDeltaY = 0;

$("#slick").on('mousewheel DOMMouseScroll wheel', (function(e) {
  let deltaX = e.originalEvent.deltaX;
  let deltaY = e.originalEvent.deltaY;

  if(typeof deltaY != 'undefined') {
    clearTimeout(blockTimeout);
    blockTimeout = setTimeout(function(){
      blocked = false;
    }, 50);
  
    if ((deltaY < 1 && deltaY > -1) && ((deltaX > 10 && deltaX > prevDeltaX) || (deltaX < -10 && deltaX < prevDeltaX) || !blocked)) {
      e.preventDefault();
      e.stopPropagation();

      blocked = true;
      prevDeltaX = deltaX;

      if (deltaX > 0) {
        $(this).slick('slickNext');
      } else {
        $(this).slick('slickPrev');
      }
    }
  }
}));

How to use mouse scroll instead of drag in Slick.js?

6 Answers6