Swiper 7.0.5 swiper/css gives error Module not found: Can't resolve '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;
after a whole day looking, I finally fixed it. remove swiper entirely and add version 6.8.4: npm:
npm install [email protected]
yarn:
yarn add [email protected]
then add this layout to your file and it should work:
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>