Uso "swiper": "6.8.4" en la aplicación React y creo un carrusel. Todo funciona, excepto la paginación: no aparece en la página. ¿Ves lo que hago de manera incorrecta?
... function Carousel() { return ( <Swiper modules={[EffectFade, Keyboard, Pagination, Autoplay]} pagination={{ el: '.swiper-pagination', type: 'bullets', }} effect={'fade'} fadeEffect={{crossFade: true}} freeMode={true} autoplay={{ delay: 2500, disableOnInteraction: false, }} keyboard={{ enabled: true, onlyInViewport: true, onPageUp: true, }} className="mySwiper" cssMode={true} loop={false} mousewheel={true} slidesPerView={1} > <SwiperSlide>0</SwiperSlide> <SwiperSlide>1</SwiperSlide> </Swiper> ) } export default CarouselQuiero compartir que debemos ser conscientes de cómo importamos Swiper en nuestras aplicaciones React.
En mi caso, finalmente cambié la versión de Swiper a "swiper": "8.1.4". Luego lo importé como:
import {Swiper, SwiperSlide} from 'swiper/react/swiper-react'y empezó a funcionar.
El paquete Swiper NPM ahora es un paquete ESM puro . Lo que significa que ya no tiene módulos CommonJS (los que tienen sintaxis require() y module.exports) y contiene solo módulos ES nativos. Si su paquete/herramientas/entorno no es compatible con el módulo Node ES, debe actualizarlo o permanecer en Swiper 6.