I'm using Swiper Slideshow. I'm using this particular version. Here's the exact code I'm using.
When adding a second "Swiper", the pagination doesn't work properly.
I tried giving a different class to the second "swiper" container but it didn't work.
How can I have two of this in the same page???
Thanks.
In my case, the issue was with using multiple auto-initialized instances while using Framework7 Core to update slide results based on the data values.
The missing piece for this use case was assigning an
id
to the swiper container, for example:This little bit of magic causes everything to work again, otherwise it tries to re-use the Swiper instances and gets very confused about which one the instance belongs to. Once again Vladimir has thought of everything :)
Their support sent me this DEMO. It works!
You don't need to do anything to the JS File. All you need is to add an extra class to pagination, add an extra class also to the slideshow, and differentiate the rest of the classes on everything else (see code below). With this you can have as many slishows as you want in the same page.
@David Martins Thanks a lot, but in current version 4.5.0, you need to modify a little js code:
anyway, thanks a lot for help!
You were going down the right path - you need to add a different class to the second swiper but you also need to add references to the new class in
dist/js/swiper.min.js
otherwise it will only be targeting elements using the original class. It should just be a case of copying the relevant sections and repeating them with the new ID (same as what I had to do with wow.js).In case someone is passing here in search for a solution to conflicts with prev and next button between multiple swipers, this is what fixed it for me (Nuxt.js/SSR project):
1) Add id attributes to button's divs:
<div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div>
<div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div>
2) In the swiper options object, refer to the new ids instead of
swiper-button-prev
andswiper-button-next
classes: