vue轮播图插件vue-awesome-swiper(2)
异步数据例子
<template>
<swiper :options="swiperOption">
<swiper-slide v-for="slide in swiperSlides">I'm Slide {{ slide }}</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
autoplay: 3500,
setWrapperSize :true,
pagination : '.swiper-pagination',
paginationClickable :true,
mousewheelControl : true,
observeParents:true,
},
swiperSlides: [1, 2, 3, 4, 5]
}
},
mounted() {
setInterval(() => {
console.log('simulate async data')
let swiperSlides = this.swiperSlides
if (swiperSlides.length < 10) swiperSlides.push(swiperSlides.length + 1)
}, 3000)
}
}
</script>
移动端例子的代码
例子
SSR例子的代码
例子
API
参考官网: http://www.swiper.com.cn/api/index.html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。
