import swiper not working

ayesha-waris commented 3 years ago

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

brunolcarlos commented 3 years ago

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

snovosel commented 3 years ago

also not working for me either

benistary commented 3 years ago

Same

Gofack commented 3 years ago

Same

aminghe commented 3 years ago

Same

snovosel commented 3 years ago

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

vicki-unitek commented 3 years ago

which version

anuragsinghbam commented 3 years ago

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 swiper@6.0.2

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 commented 2 years ago

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 swiper@6.0.2

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>

kidjp85 / react-id-swiper

import swiper not working #501