import swiper not working

[ayesha-waris]

my react version is 17 and i'm not able to import swiper

[brunolcarlos]

I have the same problem ./node_modules/react-id-swiper/lib/ReactIdSwiper.js Module not found: Can't resolve 'swiper' in

[snovosel]

also not working for me either

[benjaminstary]

Same

[Gofack]

Same

[aminghe]

Same

[snovosel]

I've found that downgrading the package to the last major version fixed the issue for me

[vicki-unitek]

which version

[anuragsinghbam]

which version

There is some issue with the new version 7.0.6 of swiper. So to go back to the previous version of the swiper use this command.

npm install [email protected]

And use this syntax to import.

import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation, Pagination, Controller, Thumbs } from 'swiper'
import 'swiper/swiper-bundle.css'

SwiperCore.use([Navigation]);

And to use it follow this syntax.

const App = () => (
  <div className='hero-section'>
    <Swiper navigation={true} className='mySwiper'>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
   </div>
)

export default App

[TianxiangHan]

which version

There is some issue with the new version 7.0.6 of swiper. So to go back to the previous version of the swiper use this command.

npm install [email protected]

And use this syntax to import.

import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation, Pagination, Controller, Thumbs } from 'swiper'
import 'swiper/swiper-bundle.css'

SwiperCore.use([Navigation]);

And to use it follow this syntax.

const App = () => (
  <div className='hero-section'>
    <Swiper navigation={true} className='mySwiper'>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
   </div>
)

export default App

Just adding on top of anuragsinghbam's answer. if you want to use the pagination, Autoplay or FadeEffect onto the slides, just to add them in SwiperCore.use() and then pass them as props as following: SwiperCore.use([Navigation,Pagination,EffectFade,Autoplay]); <Swiper

            modules={[Navigation, Pagination,EffectFade,Autoplay]}
             effect={"fade"}//there are effects of 'slide' | 'fade' | 'cube' | 'coverflow' | 'flip' | 'creative' | 'cards'
            spaceBetween={50}// space between slides
            slidesPerView={4} // useful if your slides is cards
            centeredSlides={true}
            pagination={{ clickable: true }}   //pagination 
            autoplay={{delay: 1000,disableOnInteraction: false,}}      
            onSlideChange={() => console.log("slide change")}
            onSwiper={swiper => console.log(swiper)}
            className="mySwiper"
            
>
          <SwiperSlide ><img /></SwiperSlide>
          <SwiperSlide ><img /></SwiperSlide>
          <SwiperSlide ><img /></SwiperSlide>
          <SwiperSlide ><img /></SwiperSlide>
          <SwiperSlide><img /></SwiperSlide>