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 swiper@6.8.4
yarn:
yarn add swiper@6.8.4
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>
For swiper@7.3.1, the imports in a Create-React-App project work this way -
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'
try this
import 'swiper/swiper.scss';