By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too:

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

If you want to import Swiper with all modules (bundle) then it should be imported from swiper/bundle:

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

Checkout the swipper docs

import 'swiper/swiper.scss'; this way will help you

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

Try this. if u have to import any css for pagination, effect-coverflow, etc then import like this..

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

"nodemodules/swiper/modules " contains all the styling.

if not solved... then simply got to nodemodules and open the swiper file then search for css files required to import for your project and then import them in code

use react-slick instead of this. swiper and react-slick also same.

try it: https://github.com/akiran/react-slick

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'

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>

In recent versions of Swiper, there is no longer a css folder. So... to put it simply: swiper/css no longer exists.

But the scss file is available so you can simply adapt your import in this way import 'swiper/swiper.scss';

Of course as you are on React you will also need the node-sass library

try this

 import 'swiper/swiper.scss';

Replace it with import { Swiper, SwiperSlide } from "swiper/react/swiper-react"; import "swiper/swiper-bundle.min.css";

I encountered the same issue. As a result, I'm forced to drop to 6.8.4. To begin, uninstall the most recent version of swiper js.

npm uninstall swiper

then install

npm install swiper@6.8.4

Then replace

// 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": "^8.0.2" version, how I solved it

import 'swiper/swiper.min.css';

Other csss used to clone the demo.

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

If css files are not allowed to be imported individually, try adding them to the top root paths such as index.jsx.

import 'swiper/swiper-bundle.css';