Open developeremi opened 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
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.
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.
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])
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 🎉
The latest version has a problem with react and the previous and next buttons do not work