I use "swiper": "6.8.4" in React app and create carousel. Everything is working, except pagination - its not appearing on the page. Do you see what I do in a wrong way?
...
function Carousel() {
return (
<Swiper
modules={[EffectFade, Keyboard, Pagination, Autoplay]}
pagination={{
el: '.swiper-pagination',
type: 'bullets',
}}
effect={'fade'}
fadeEffect={{crossFade: true}}
freeMode={true}
autoplay={{
delay: 2500,
disableOnInteraction: false,
}}
keyboard={{
enabled: true,
onlyInViewport: true,
onPageUp: true,
}}
className="mySwiper"
cssMode={true}
loop={false}
mousewheel={true}
slidesPerView={1}
>
<SwiperSlide>0</SwiperSlide>
<SwiperSlide>1</SwiperSlide>
</Swiper>
)
}
export default Carousel
I want to share that we must be aware of how we import Swiper into our React apps.
In my case, I finally changed the Swiper version to "swiper": "8.1.4". Then I imported it like:
import {Swiper, SwiperSlide} from 'swiper/react/swiper-react'
and it started to work.
Swiper NPM package is now a pure ESM package. Which means it doesn't have CommonJS modules anymore (the ones with require() and module.exports syntax) and contains only native ES modules. If your bundler/tooling/environment doesn't support Node ES module, you should update it or stay on Swiper 6.