vue中使用多个swiper（vue-awesome-swiper）

vue中使用多个swiper（vue-awesome-swiper）

1、关于vue-awesome-swiper的使用，参照VUE中使用vue-awesome-swiper

2、使用多个swiper
为每个swiper定义一个自己的swiperOption变量，:options时一一对应刚才定义的变量，当有前进后退按钮时，swiperOption的navigation的前进后退按钮定义相应的class名称，记得将HTML中前进后退按钮的class中添加与之相应的class名称。
例如：

js部分：

data () {
	return {
		swiperOption_1: {
			slidesPerView: 1,
			navigation: {
				nextEl: '.swiper-button-next_1',
				prevEl: '.swiper-button-prev_1'
			},
			// autoplay: true, //可设置数值来指定播放速度
			autoplay: {
				delay: 3000,
				disableOnInteraction: false,
			}, //可设置数值来指定播放速度
			loop: true,
			speed: 800, // 切换图片速度
			loop: true
		},
	}
},

html部分：

<swiper :options="swiperOption_1" ref="meterChartSwiper">
  <swiper-slide v-for="item in 5" :key="index">
  	{{ item }}
  </swiper-slide>
</swiper>
<!-- 前进后退按钮 -->
<div class="swiper-button-prev swiper-button-prev_1" slot="button-prev"></div>
<div class="swiper-button-next swiper-button-next_1" slot="button-next"></div>