search

kidjp85 / react-id-swiper

A library to use idangerous Swiper as a ReactJs component which allows Swiper's modules custom build
https://react-id-swiper.ashernguyen.site/
MIT License
1.49k stars 154 forks source link

latest version not working with next and prev botton #477

Open developeremi opened 3 years ago

developeremi commented 3 years ago

The latest version has a problem with react and the previous and next buttons do not work

itshosein commented 3 years ago

The latest version has problem with the last version of swiper package i installed swiper 5.2.0 and problem solved for now

but we are waiting for package update

palomabarroso commented 3 years ago

So, I searched and finally find a solluction to this problem. Since version 6.0.0, there has been a huge change in how the swiper imports css. Now if we want to use the navigation features, for example, we need to import their respective css.

https://github.com/nolimits4web/swiper/blob/master/CHANGELOG.md#swiper-600---released-on-july-3rd-2020.

Like this. import "swiper/swiper.scss"; import "swiper/components/a11y/a11y.scss"; import "swiper/components/controller/controller.scss"; import "swiper/components/effect-fade/effect-fade.scss"; import "swiper/components/effect-cube/effect-cube.scss"; import "swiper/components/effect-flip/effect-flip.scss"; import "swiper/components/lazy/lazy.scss"; import "swiper/components/navigation/navigation.scss"; import "swiper/components/pagination/pagination.scss"; import "swiper/components/scrollbar/scrollbar.scss"; import "swiper/components/thumbs/thumbs.scss"; import "swiper/components/zoom/zoom.scss";

This is the link that i managed to find exactly that. The lib swiper is the basis of the lib react-id-swiper. So I put the dots together and it worked for me. https://swiperjs.com/react/

Before I used version 5.4.5 just because the features were not working correctly.

palomabarroso commented 3 years ago

I also need to import the sets and define it like this:

import SwiperCore, { Virtual,Keyboard,Mousewheel,Navigation,Pagination,Scrollbar,Parallax,Zoom,Lazy,Controller,A11y,History,HashNavigation,Autoplay,EffectFade,EffectCube,EffectFlip,EffectCoverflow,Thumbs} from "swiper"

SwiperCore.use([Virtual,Keyboard,Mousewheel,Navigation,Pagination,Scrollbar,Parallax,Zoom,Lazy,Controller,A11y,History,HashNavigation,Autoplay,EffectFade,EffectCube,EffectFlip,EffectCoverflow,Thumbs])

sindrefs commented 3 years ago

I also need to import the sets and define it like this:

import SwiperCore, { Virtual,Keyboard,Mousewheel,Navigation,Pagination,Scrollbar,Parallax,Zoom,Lazy,Controller,A11y,History,HashNavigation,Autoplay,EffectFade,EffectCube,EffectFlip,EffectCoverflow,Thumbs} from "swiper"

SwiperCore.use([Virtual,Keyboard,Mousewheel,Navigation,Pagination,Scrollbar,Parallax,Zoom,Lazy,Controller,A11y,History,HashNavigation,Autoplay,EffectFade,EffectCube,EffectFlip,EffectCoverflow,Thumbs])

Thanks! This worked for med with swiper@6.0.2! The buttons finally appeared 🎉