在同一个页面使用多个swiper,多个轮播出现冲突的问题?

本文是解决同一个页面多个swiper，点击其中一个轮播的前进后退按钮，影响其它轮播的问题
代码如下

<swiper class="swiper gallery-top" v-if="list.length > 0" :options="swiperOptionTop" ref="swiperTop">
   <swiper-slide class="slide-1" v-for="(item,i) in list" :key="i">
     <img class="item-img" :src="item" />
     <div class="swiper-button-prev" :class="`swiper-button-pre${index}`"></div>
     <div class="swiper-button-next" :class="`swiper-button-next${index}`"></div>
   </swiper-slide>
 </swiper>

swiperOptionTop: {
   loop: false,
   spaceBetween: 10,
   navigation: {
     prevEl: '.swiper-button-prev' + this.index,
     nextEl: '.swiper-button-next' + this.index
   }
 },

引起这种bug的原因是：
切换按钮类名，要不一样，一个页面有多个组件的时候，解析出来的时候是一个html，所以左右按钮用的同一个类名，就会出现问题，解决方式就是给按钮添加不同的类名。