vue中使用多个swiper(vue-awesome-swiper)
vue中使用多个swiper(vue-awesome-swiper)1、关于vue-awesome-swiper的使用,参照VUE中使用vue-awesome-swiper2、使用多个swiper为每个swiper定义一个自己的swiperOption变量,:options时一一对应刚才定义的变量,当有前进后退按钮时,swiperOption的navigation的前进后退按钮定义相应的class
·
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>
更多推荐
已为社区贡献5条内容
所有评论(0)