CODEWITHSUNDEEP
javascript
cboiyrjiblllgsbpus
cboiyrjiblllgsbpus

Reputation: 3

how to change carousel slide on mousewheel

I'm working on a project and I need to create a vertical carousel that works on scroll (mousewheel) I just need to know how can I handle the sliding on scroll.

I have a function called nextSlide when I call then it get the next slide.

I did something like this (I checked the direction and other stuff but I'm adding the simplest code snippet here)

Note: I did Debounce on my function but it didn't work

el.addEventListener('wheel', (event) => {
  event.preventDefault();
  nextSlide();
});

The problem here is the event firing on each mouse scroll I just need to handle it on one scroll here is an example from swiper

https://codepen.io/Seamni69/pen/vYgmqVd

What I meant by one scroll is calling the function just one time when scrolling, no matter how much scrolling is.

Upvotes: 0

Views: 1012

Answers (1)

Invizi
Invizi

Reputation: 1298

Created this. if wheelDeltaY is positive, you are scrolling down. If it's negative you are scrolling up.

window.addEventListener('wheel', throttle(scrollDirection, 500));

function scrollDirection(e) {
  e.preventDefault();

  e.wheelDeltaY > 0 
    ? console.log("DOWN") 
    : console.log("UP")
  e.stopImmediatePropagation();
};

function throttle(func, interval) {
  let lastCall = 0;
  return function() {
    const now = Date.now();
    if (lastCall + interval < now) {
      lastCall = now;
      return func.apply(this, arguments);
    }
  };
}

Upvotes: 1

Related Questions