Vue-awesome-swiper: Multiple swipers for SSR

[nop33]

Hello and thank you for this great library!

I am trying to render multiple swipers on my site. I found your demo regarding multiple swipers, but unfortunately, it's a SPA example.

Is there a way to render multiple swiper instances with SSR? The only thing I found that could have helped me was this question regarding dynamic directive arguments, but as the answer suggests, it's not possible.

Thanks a lot and keep up the good work!

[nop33]

I found a way to do this my creating a new component (let's call it MySwiper.vue) which renders 1 swiper.
Then if I need multiple swipers on the same page, I just create multiple instances of MySwiper.
It might be useful to mention this in the docs, especially on the demo example with multiple swipers.

[surmon-china]

https://github.com/surmon-china/vue-awesome-swiper/issues/269

[surmon-china]

https://github.com/surmon-china/vue-awesome-swiper/blob/master/src/ssr.js#L49

[baztypetrucci]

@nop33 How did you make multiple instances? I'm using SSR via Nuxt
In the vue file importing the same component:

import carouselA from "~/components/carouselA.vue"; import carouselB from "~/components/carouselA.vue"; export default { components: { SliderchicasA, SliderchicasB } };

The component file:

<div v-swiper:mySwipper="swiperOption"> <div class="swiper-wrapper"> <div class="swiper-slide" ...

I've tried many ways, but with no result, thanks for reading.

[dongj0316]

Should be used like this
<div v-swiper:nameA="optionsA">...
<div v-swiper:nameB="optionsB">...

[edugrip]

@nop33 , Thanks for that. I don't know how many hours you saved me! your solution worked perfectly.

[ramigs]

Should be used like this
<div v-swiper:nameA="optionsA">...
<div v-swiper:nameB="optionsB">...

hi dongj0316!

thanks for your suggestion, I've tried but unfortunately the prev and next arrows of both swipers still do not behave independently from each other :(

do your swipers have the arrows or only pagination?

[ramigs]

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:

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 and swiper-button-next classes:

swiperOption: {
        direction: 'horizontal',
        slidesPerView: 4,
        spaceBetween: 6,
        navigation: {
          nextEl: '#button-next-relacionados',
          prevEl: '#button-prev-relacionados'
        },

[surmon-china]

Read here!

Document with directive [instance name] props.

@ramigs Good job!