Multiple instances of swiper using Nuxt / Vue

[baztypetrucci]

BUG REPORT TEMPLATE

Vue version: "2.5.4" via Nuxt "^1.0.0-rc11" and "vue-awesome-swiper": "^3.1.3"

Reproduction Link

//INDEX: Where I call a Swiper component

<template>
  <div class="home">
    <section>
      <h2 class="pageTitle container">Novedades</h2>
      <no-ssr><b-tabs class="homeTabNav" pills>
        <b-tab title="Por primera vez" active>
          <div class="homeSlider">
            <Carousel v-bind:json="$store.state.jsonA[0]"/>
          </div>
        </b-tab>
        <b-tab title="Están de vuelta">
          <div class="homeSlider">
            <Carousel v-bind:json="$store.state.jsonB[0]"/>
          </div>
        </b-tab>
      </b-tabs></no-ssr>
    </section>
  </div>
</template>

<script>
import Carousel from "~/components/Carousel.vue";
export default {
  components: {
    Carousel
  }
};
</script>


// Component: Where is located the swiper component with the binded data

<template>
  <div class="swiper-container">
    <div v-swiper:mySwipper="swiperOption">
      <div class="swiper-wrapper">
        <div class="swiper-slide" xxxxxxxxxxx >

          <router-link xxxxxxxxxxx>
          <div class="xxxxxxxxxxx">
            <h2 class="xxxxxxxxxxx" v-show="xxxxxxxxxxx">{{xxxxxxxxxxx}}</h2>
            <div class="xxxxxxxxxxx">{{xxxxxxxxxxx}}</div>
          </div>

        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import 'swiper/dist/css/swiper.css'
if (process.browser) {
  const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
  Vue.use(VueAwesomeSwiper)
}
export default {
  props: ["xxxxxxxxxxxxxxxxxxxxxx"],
  data(){
    return{
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 0,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      }
    }
  },
  asyncData(context) {
    // called every time before loading the component
    return {
      xxxxxx: "/xxxxxxxxxxxx/" + xxxxxxxxxxxx
    };
  }
};
</script>

Steps to reproduce

I need to call my swiper component in different instances, but only one swiper is loaded, the others just not works, the swipers are located in different tabs.

What is Expected?

Every instance of the component swiper has to be loaded and working by itself

What is actually happening?

Only one swiper works, the other just not.

Some screenshots:

##Working:

##Not Working:

[baztypetrucci]

OK, I found the solutions....the issue here is the need of vue-swiper to be displayed, so if you have a swiper on a tab, is hidden or maybe with "didplay: none", this is not good, my fix was use a "loader" that hides in a lower layer my carousels, then, when everything is ready, mounted and loaded, execute the tab maker and removes the loader.

[bigperson]

I have the same problem.

[rameshpaudel]

Is there workaround for this?? Can't seem to use multiple instances.

[shijunti19]

多个正常。但是弹窗里 position: fixed;，不能用多个，只能一个正常

[dllsystem]

v-swiper:mySwipper1="swiperOption"

v-swiper:mySwipper2="swiperOption"

[Akimotorakiyu]

+1, and below code works in my case setTimeout or Vue.nextTickor this.$nextTick is nesscessary, else it is not work

<template>
<el-tabs  @tab-click="updateSwiper">
      <el-tab-pane
        v-for="(item,index) in list"
        :label="item.title"
        :name="index.toString()"
        :key="index"
      >
        <swiper :options="swiperOption[index]" :ref="`mySwiper${index}`">
          <swiper-slide v-for="(slide, index) in item.slides" :key="index">
            {{item.title}}
          </swiper-slide>
          <div :class="`swiper-pagination${index}`" style="text-align:center" slot="pagination"></div>
        </swiper>
      </el-tab-pane>
    </el-tabs>
</template>

import Vue from "vue";
export default Vue.extend({
data(){
    return {
                list:[{title:"test",slides:[]},{title:"test",slides:[]}]
              }
},
computed:{
  swiperOption() {
      return  (this as any).list.map((ele, index) => {
        return {
          pagination: {
            el: `.swiper-pagination${index}`,
            clickable: true
          },
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true
          },
          autoplayDisableOnInteraction: false
        };
      });
    },
},
methods: {
    updateSwiper(info) {
// `setTimeout` or `Vue.nextTick`or `this.$nextTick` is nesscessary, else it is not work
      setTimeout(() => {
        (this.$refs[`mySwiper${info.index}`][0] as any).update();
      }, 0);
    }
  }
}

[CHEWX]

You need a unique instance name.

<div class="slideshow" v-swiper="swiperOption" :instanceName="unique.id.here">

[edugrip]

for using with ssr, moving the code to a separate component and then resusing the component for each iteration worked. !! :) (in case you want to use the swiper for a v-for..loop).

[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'
        },

[meiirzhanmeldebay]

Hello everybody! I had the same issue . I had 6 tabs and each of them its own swiper slider . And when you switching tabs swiper not worked . I fixed like this: 1) for all swiper make init:false except the first one . Then when tabs shown i INIT each slide . Then its worked .

[MatteoGauthier]

Any update ?

[robertoandres24]

my solution was to add a v-if directive to the not displayed tab, linked to a false boolean variable in my data. and when the click event is fired, make that variable true.

<template>
<b-tabs>
  <b-tab title="foo" active class="foo">
    <div v-swiper:mySwiperFoo="swiperOption">
      <div class="swiper-wrapper">
        <div
          v-for="banner in banners"
          :key="banner"
          class="swiper-slide"
        >
          <img :src="banner" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </b-tab>
  <b-tab title="bar" @click="showSecondSwiper = true">
    <div v-if="showSecondSwiper" v-swiper:mySwiperBar="swiperOption">
      <div class="swiper-wrapper">
        <div
          v-for="banner in banners"
          :key="banner"
          class="swiper-slide"
        >
          <img :src="banner" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </b-tab>
</b-tabs>
</template>

<script>
export default {
  data() {
    return {
      banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        // ...
      },
      showSecondSwiper: false
    }
  }
}
</script>

[MUMUKSHMEGHWAL]

I am having multiple carousel on same page and navigation buttons are not working properly. Clicking on one and other carousel is working because of the instance issue. Even pagination is applying randomly.

:InstanceName="uniqueName" didnt solve anything for me.

[marcell17002]

any update ?