Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

latest version not working with next and prev botton #477

Open
mehrdad-masoumi opened this issue Nov 7, 2020 · 4 comments
Open

latest version not working with next and prev botton #477

mehrdad-masoumi opened this issue Nov 7, 2020 · 4 comments

Comments

@mehrdad-masoumi
Copy link

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

@itshosein
Copy link

itshosein commented Nov 12, 2020

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
Copy link

palomabarroso commented Nov 17, 2020

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
Copy link

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
Copy link

sindrefs commented Jan 7, 2021

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 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants