React-id-swiper: latest version not working with next and prev botton

[mehrdad517]

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

[hosein-fatthi]

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]

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]

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]

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 [email protected]! The buttons finally appeared 🎉