Estoy tratando de implementar el módulo de arrastre del mouse que permitiría atravesar todas las diapositivas en swiper con un solo arrastre del mouse igual a la altura total de la envoltura div (funcionalidad similar a la barra de desplazamiento pero que funciona sin importar dónde haga clic). Para ello he implementado el siguiente código:
function longDrag({ swiper, extendParams, on }) { let prevY = null; on('sliderMove', (swiper, e) => { if (!swiper.params.debugger) return; if (!prevY) prevY = e.clientY; if (prevY < e.clientY) { swiper.slideNext(0, false); } if (prevY > e.clientY) { swiper.slidePrev(0, false); } prevY = e.clientY; }); on('slideChange', () => { if (!swiper.params.debugger) return; console.log( 'slideChange', swiper.previousIndex, '->', swiper.activeIndex ); }); }Al ejecutar el código, se activa el evento slideChange que indica que el índice de la diapositiva activa cambia, sin embargo, en la diapositiva del navegador no cambia. Además, cuando finaliza el arrastre del mouse, el índice de la diapositiva activa vuelve a la primera diapositiva. He intentado modificar algunos otros eventos y parece que este regreso a la primera diapositiva es causado por algo justo después de que se emite el evento TransitionEnd; agregando
on('transitionEnd', (swiper) => { throw new Error("Not an error, just workaround") });a la función longDrag hace que el script funcione según lo previsto, sin embargo, no creo que esta sea la forma correcta de hacerlo.