Article From:https://segmentfault.com/q/1010000015351367
Question:

You want to do multiple rounds in the same Vue, and you want to get the activeIndex that each swiper currently switches to.
You know how to get activeIndex when you are single, but how do you do it when you have multiple? How do you distinguish them?

<template>
<div>
<swiper  :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item,index) in listdata" :key="index"> 
{{item}}
 </swiper-slide>   
</swiper>   
</div>
</template>

import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
    components:{
        swiper, 
        swiperSlide
    },
    data(){
       return{
             swiperOption: {
                pagination: {
                    el: '.swiper-pagination'
                },
                on:{
                    slideChangeTransitionEnd:()=>{
                        console.log(this.swiper.activeIndex)
                        } 
                    }
            },
       } 
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    }
 }   

Answer 0:

1.Use multiple options in multiple times to get the corresponding activeIndex in the slideChangeTransitionEnd event you wrote.
2.You can also have multiple refs at multiple times, register the slideChangeEnd event directly through ref, get the activeIndex in the event, and see your swiper version

One Reply to “How does vue-awesome-swiper use multiple swiper on the same Vue page?”

  1. Pingback: 【Vue.js】vuejsで簡単にスライダー(カルーセル)を爆速で実装する | IT技術情報局

Leave a Reply

Your email address will not be published. Required fields are marked *