Swiper 7.0.5 swiper/css da error Módulo no encontrado: No se puede resolver 'swiper/css'
import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; function Test() { return ( <Swiper spaceBetween={50} slidesPerView={3} 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> ); } export default Test;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.4hilo:
yarn add swiper@6.8.4luego 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>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'prueba esto
import 'swiper/swiper.scss';