Estoy trabajando en un proyecto y necesito crear un carrusel vertical que funcione en el desplazamiento (rueda del mouse). Solo necesito saber cómo puedo manejar el deslizamiento en el desplazamiento.
Tengo una función llamada nextSlide cuando llamo y luego obtiene la siguiente diapositiva.
Hice algo como esto (verifiqué la dirección y otras cosas, pero estoy agregando el fragmento de código más simple aquí)
Nota: Hice Debounce en mi función pero no funcionó
el.addEventListener('wheel', (event) => { event.preventDefault(); nextSlide(); });El problema aquí es que el evento se activa en cada desplazamiento del mouse. Solo necesito manejarlo en un desplazamiento. Aquí hay un ejemplo de swiper.
https://codepen.io/Seamni69/pen/vYgmqVd
Lo que quise decir con un desplazamiento es llamar a la función solo una vez al desplazarse, sin importar cuánto se desplace.
Creó esto. si wheelDeltaY es positivo, se está desplazando hacia abajo. Si es negativo, se está desplazando hacia arriba.
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); } }; }