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>
Logo

前往低代码交流专区

更多推荐