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/

Avaria

Answer 1

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/[email protected]/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css" />

<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/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

Pacer

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. – Comedo

@JeremyQuinton I cannot see any flicker. Can you provide me a demo? – Pacer

Answer 2

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');
    }
}));

Prefer

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. – Linlithgow

I updated the code here 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 – Linlithgow

@Linlithgow update code add line: clearTimeout(scroll); before - scroll = setTimeout(function(){scrollCount=0;}, 200); – Prefer

,Give me some time to check – Linlithgow

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. – Linlithgow

I asked one question here #57041777 – Linlithgow

@Linlithgow 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 #26236378. Hopefully this will help – Prefer

Answer 3

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.

Solana

This works really well! Thank you! – Nuncia

This is great! Is there a way to continue scrolling the page after the last slide? – Terti

Answer 4

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.

Graviton

Answer 5

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');
        }
    }
}));

Record

Thanks, thats working great for me. I changed also deltaX from 10 to 50 and this working better with MacOS trackpad. Thanks! – Gangue

Answer 6

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');
      }
    }
  }
}));

Yearly