Open ostrichegret opened 4 years ago
Confirming that it seems to be gone: Works on old version seen here: https://healthimpactfund.org/en/ Renders:
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
<span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 5"></span>
</div>
In the new version I just get this:
<div class="swiper-pagination"></div>
And the <span>
elements are not present 😢
You can solve the pagination issue buy doing the following:
Step 1 Update swiper 5.4.5 to 6.0.4
Step 2 Update Slider.tx by adding the lines below.
import SwiperCore, { Pagination } from "swiper"
SwiperCore.use([Pagination])
Here a complete list of modules you may use: https://swiperjs.com/api/#custom-build
Same here, pagination not working (renders the prev/next button but no action when clicked, no bullets pagination), looks like swiper 5.4.5 is the latest version that is supported
same issue there is no pagination. I did what @kouliavtsev said and it's working. I've also added Navigation SwiperCore.use([Pagination, Navigation])
Can we update the doc according to @kouliavtsev solution?
@kouliavtsev thank you very much for the solution :)
Hi all,
I'm trying to figure out how to fix this. I have installed react-id-swiper in my application. Where exactly do I update swiper 5.4.5 to 6.0.4? I have tried in /node_modules/react-id-swiper/package.json and restarted my app but that doesn't fix the issue.
Also, I can't find the file Slider.tx. My react-id-swiper module structure look like this
Could I please get any help? Thank you!
@jeffceriello I figured it out. In addition to the first line (as before), also include the second line:
import Swiper from 'react-id-swiper';
import SwiperCore, { Pagination } from 'swiper';
and later:
SwiperCore.use([Pagination])
Just as 🙇 @kouliavtsev wrote above 🎉
I got it to work with my Gatsby 👍 https://github.com/whyboris/Health-Impact-Fund/pull/31/commits/42fb91b7a30134a3363ea89e438bc1a4b3870b5d
Thanks @whyboris
In the end I've switched to this Swiper React Component here https://swiperjs.com/react and I've not had any issue with it.
Cheers, Jeff
Pagination missing after updating swiper to version 6 https://codesandbox.io/s/pagination-example-dug1v
Fix from @kouliavtsev You can solve the pagination issue buy doing the following:
Step 1 Update swiper 5.4.5 to 6.1.2
Step 2 Update Slider.tx by adding the lines below.
all modules:
Here a complete list of modules you may use: https://swiperjs.com/api/#custom-build
Here is the list of additional modules imports: Virtual - Virtual Slides module Keyboard - Keyboard Control module Mousewheel - Mousewheel Control module Navigation - Navigation module Pagination - Pagination module Scrollbar - Scrollbar module Parallax - Parallax module Zoom - Zoom module Lazy - Lazy module Controller - Controller module A11y - Accessibility module History - History Navigation module HashNavigation - Hash Navigation module Autoplay - Autoplay module EffectFade - Fade Effect module EffectCube - Cube Effect module EffectFlip - Flip Effect module EffectCoverflow - Coverflow Effect module Thumbs - Thumbs module