React-id-swiper: Pagination Missing on Swiper 6

[ostrichegret]

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.

import SwiperCore, { Pagination } from "swiper"
SwiperCore.use([Pagination])

all modules:

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])

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

[whyboris]

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 😢

[kouliavtsev]

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

[winadiw]

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

[salsager]

same issue there is no pagination. I did what @kouliavtsev said and it's working. I've also added Navigation SwiperCore.use([Pagination, Navigation])

[arnaudjnn]

Can we update the doc according to @kouliavtsev solution?

[ostrichegret]

@kouliavtsev thank you very much for the solution :)

[jeffceriello]

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!

[whyboris]

@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

[jeffceriello]

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