Uso "swiper": "6.8.4" en la aplicación React para carrusel.
Necesito cambiar las diapositivas haciendo clic en el botón "Espacio". Por defecto cambia haciendo clic en las flechas. ¿Me podrías aconsejar cómo?
function Carousel() { document.addEventListener("keydown", function(e){ if(KeyboardEvent.code == 'Space') { swiper.slideNext(); //not working } if(e.keyCode == 32) { swiper.slideNext(); //not working } }); return ( <div className={classes.carouselWrapper}> <Swiper autoplay={{ delay: 2500, disableOnInteraction: false, }} keyboard={{ enabled: true, onlyInViewport: true, }} pagination={true} className="mySwiper" cssMode={true} loop={false} scrollbar={{draggable: true}} modules={[Autoplay, Navigation, Pagination, Keyboard]} mousewheel={true} onSwiper={swiper => console.log(swiper)} slidesPerView={1} > <button> Change slide by clicking space </button> <SwiperSlide> 1 </SwiperSlide> <SwiperSlide> 2 </SwiperSlide> </Swiper>document.body.onkeyup = function(e){ if(e.keyCode == 32){ swiper.slideNext(); }
¿Puede verificar también si alguna biblioteca adicional está usando un detector de eventos para la barra espaciadora que podría interrumpir su proceso?
Lo primero que desea hacer es guardar swiper en el estado para poder llamar a slideNext , puede hacerlo usando la función onSwiper . Luego use useEffect para agregar y eliminar el detector de keydown .
function Carousel() { const [swiper, setSwiper) = useState(null); useEffect(() => { const keydownHandler = e => { if(swiper && e.keyCode == 32) { e.preventDefault(); swiper.slideNext(); } } document.addEventListener('keydown', keydownHandler); return () => { document.removeEventListener('keydown', keydownHandler); } }, [swiper]) return ( <div className={classes.carouselWrapper}> <Swiper autoplay={{ delay: 2500, disableOnInteraction: false, }} keyboard={{ enabled: true, onlyInViewport: true, }} pagination={true} className="mySwiper" cssMode={true} loop={false} scrollbar={{draggable: true}} modules={[Autoplay, Navigation, Pagination, Keyboard]} mousewheel={true} onSwiper={setSwiper} slidesPerView={1} > <button> Change slide by clicking space </button> <SwiperSlide> 1 </SwiperSlide> <SwiperSlide> 2 </SwiperSlide> </Swiper> ) } Tenga en cuenta que los navegadores utilizan space para desplazarse por la página hacia abajo, probablemente no desee evitar la acción predeterminada.