React-id-swiper: Problem with pagination rendering
Hi!
I have issue with rendering pagination bullets. As soon as i refresh my page, only one swiper pagination bullet will appear. If i resize the screen just a bit, all bullets will come back.
I'm stuck a bit. Maybe you can help?
Check the gif, please.
aimarjs
All 2 comments
I have a similar issue.
When loading the page for the first time, I can drag the first slide but it won't go the the next one and ignore any given parameter ("centeredSlides", "slidesPerView", "spaceBetween"...) , but as soon as I resize the screen (even juste one pixel), everything works fine.
EDIT:
I found out what my problem was : I was using some asynchronous data to populate the swiper slides, so when my Swiper first instanciate, it didn't have any data. And the reason why it was suddently working on the window resize is because it was then refreshing the layout.
My solution was to store swiper in a this.swiper variable, then calling this.swiper.onResize() in the componentDidUpdate() method.
Maybe you have a similar situation where Swiper is created before you have all your data.
qbeauperin
on 11 Mar 2017
Hi @aimarjs , it will be really helpful if u can share ur code :)
kidjp85
on 19 Mar 2017
Related issues
catamphetamine
路
5Comments
ositaka
路
4Comments
Alexandrdrdr
路
3Comments
nerdyman
路
3Comments
yuschick
路
5Comments
Most helpful comment
I have a similar issue.
When loading the page for the first time, I can drag the first slide but it won't go the the next one and ignore any given parameter ("centeredSlides", "slidesPerView", "spaceBetween"...) , but as soon as I resize the screen (even juste one pixel), everything works fine.
EDIT:
I found out what my problem was : I was using some asynchronous data to populate the swiper slides, so when my Swiper first instanciate, it didn't have any data. And the reason why it was suddently working on the window resize is because it was then refreshing the layout.
My solution was to store swiper in a
this.swipervariable, then callingthis.swiper.onResize()in thecomponentDidUpdate()method.Maybe you have a similar situation where Swiper is created before you have all your data.