A lightweight Vue-based mobile carousel plugin.
short description + sample image(png/gif/mp4)
npm install vue-mobile-swiper --save
- common usage
import Vue from 'vue'
import Swiper from 'vue-mobile-swiper'
Vue.use(Swiper)
<template>
<Swiper dots >
<SwiperItem>
<div class="swiper-item swiper-item-1">vue-mobile-swiper 1</div>
</SwiperItem>
<SwiperItem>
<div class="swiper-item swiper-item-2">vue-mobile-swiper 2</div>
</SwiperItem>
<SwiperItem>
<div class="swiper-item swiper-item-3">vue-mobile-swiper 3</div>
</SwiperItem>
<SwiperItem>
<div class="swiper-item swiper-item-4">vue-mobile-swiper 4</div>
</SwiperItem>
</Swiper>
</template>
- usage with props
dots: default: false
autoplay: default: false
autoplaySpeed: default: 5000ms
<template>
<Swiper dots autoPlay :autoplaySpeed="800">
<SwiperItem v-for="(item,idx) in picList" :key='idx'>
<img :src="item" style="height: 100%;width: 100%;object-fit: cover;"/>
</SwiperItem>
</Swiper>
</template>
<script>
import Vue from 'vue'
import Swiper from 'vue-mobile-swiper'
Vue.use(Swiper)
export default {
name: "test-vue",
data(){
return {
picList:[
'https://docer.op.wpscdn.cn/odimg/web/2020-05-18-11-32/xingzhengrenshibiao_1920x420.png',
'https://dl.op.wpscdn.cn/odimg/web/2020-03-23/014300/huibaoshouce_1920x420.png',
'https://dl.op.wpscdn.cn/odimg/web/2020-04-07/094642/keshihuatubiao_1920x420.png',
'https://docer.op.wpscdn.cn/odimg/web/2020-05-18-11-32/xingzhengrenshibiao_1920x420.png',
'https://dl.op.wpscdn.cn/odimg/web/2020-03-23/014300/huibaoshouce_1920x420.png'
]
}
}
};
</script>