Por defecto, Swiper exporta solo la versión principal sin módulos adicionales (como Navegación, Paginación, etc.). Por lo tanto, también debe importarlos y configurarlos:

 import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination';

Si desea importar Swiper con todos los módulos (paquete), debe importarse desde swiper/paquete:

 import Swiper from 'swiper/bundle'; import 'swiper/css/bundle';

Consulte los documentos de Swipper

importar 'swiper/swiper.scss'; de esta manera te ayudara

Respuesta: $import "swiper/swiper.min.css" ;

Prueba esto. si tiene que importar cualquier css para paginación, efecto-coverflow, etc., impórtelo así ...

 import "swiper/modules/pagination/pagination.min.css"; import "swiper/modules/effect-coverflow/effect-coverflow.min.css";

"nodemodules/swiper/modules" contiene todo el estilo.

si no se resuelve... entonces simplemente acceda a nodemodules y abra el archivo swiper , luego busque los css files necesarios para importar para su proyecto y luego import en código

use react-slick en lugar de esto. swiper y react-slick también son iguales.

Pruébalo: https://github.com/akiran/react-slick

Para swiper@7.3.1 , las importaciones en un proyecto Create-React-App funcionan de esta manera:

 import React from 'react' import { Pagination } from 'swiper' import { Swiper, SwiperSlide } from 'swiper/react/swiper-react' import 'swiper/swiper.min.css' import 'swiper/modules/pagination/pagination.min.css'

Después de un día entero buscando, finalmente lo arreglé. elimine el swiper por completo y agregue la versión 6.8.4: npm:

 npm install swiper@6.8.4

hilo:

 yarn add swiper@6.8.4

luego agregue este diseño a su archivo y debería funcionar:

 import { Swiper, SwiperSlide } from "swiper/react"; import 'swiper/swiper-bundle.min.css' import 'swiper/swiper.min.css' <Swiper spaceBetween={50} slidesPerView={3} centeredSlides onSlideChange={() => console.log("slide change")} onSwiper={swiper => console.log(swiper)} > <SwiperSlide>Slide 1</SwiperSlide> <SwiperSlide>Slide 2</SwiperSlide> <SwiperSlide>Slide 3</SwiperSlide> <SwiperSlide>Slide 4</SwiperSlide> </Swiper>

En versiones recientes de Swiper, ya no hay una carpeta css. Entonces... en pocas palabras: swiper/css ya no existe.

Pero el archivo scss está disponible, por lo que simplemente puede adaptar su importación de esta manera import 'swiper/swiper.scss';

Por supuesto, como estás en React, también necesitarás la biblioteca node-sass

prueba esto

 import 'swiper/swiper.scss';

Reemplácelo con import { Swiper, SwiperSlide } from "swiper/react/swiper-react"; import "swiper/swiper-bundle.min.css";

Encontré el mismo problema. Como resultado, me veo obligado a bajar a 6.8.4. Para comenzar, desinstale la versión más reciente de swiper js.

 npm uninstall swiper

luego instalar

 npm install swiper@6.8.4

Luego reemplaza

 // swiper bundle styles import 'swiper/swiper-bundle.min.css' // swiper core styles import 'swiper/swiper.min.css' // modules styles import 'swiper/components/navigation/navigation.min.css' import 'swiper/components/pagination/pagination.min.css'

"swiper": versión "^8.0.2", cómo lo resolví

 import 'swiper/swiper.min.css';

Otros csss utilizados para clonar la demostración.

 import 'swiper/modules/free-mode/free-mode.min.css'; import 'swiper/modules/navigation/navigation.scss'; import 'swiper/modules/thumbs/thumbs.min.css';

Si los archivos css no pueden importarse individualmente, intente agregarlos a las rutas principales de la raíz, como index.jsx.

 import 'swiper/swiper-bundle.css';