vue-better-swiper
v1.1.2
Published
Vue component for mobile swiper.
Downloads
25
Maintainers
Readme
vue-better-swiper
Vue component for mobile swiper.
demo
https://lzyerliu.github.io/vue-better-swiper
Usage
# install
npm install vue-better-swiper
// import
import VueBetterSwiper from 'vue-better-swiper'
Vue.use(VueBetterSwiper)
<!-- component name : zy-swiper, zy-swiper-item -->
<template>
<zy-swiper @change="swiperChange" height="160px" autoplay="5000">
<zy-swiper-item v-for="(img, index) in images" :key="index">
<img :src="img.src" alt="" class="swiper-img">
</zy-swiper-item>
</zy-swiper>
<!-- custom indicator -->
<zy-swiper @change="swiperChange" height="160px" autoplay="5000">
<div v-if="images.length > 1" slot="indicator" slot-scope="scope" class="dot-cont">
<div v-for="(itm, index) in scope.indicator.len" :key="index" class="dot" :class="{ 'dot-active': scope.indicator.current === index }"></div>
</div>
<zy-swiper-item v-for="(img, index) in images" :key="index">
<img :src="img.src" alt="" class="swiper-img">
</zy-swiper-item>
</zy-swiper>
</template>
export default {
data() {
return {
images: [
{ src: 'http://chzflive.caihome.cn/web/o_1c7390v9q1al1rak17g2v3uhc438?x-oss-process=image/resize,m_fill,h_240,w_320' },
{ src: 'http://chzflive.caihome.cn/web/o_1c7390v9q1al1rak17g2v3uhc438?x-oss-process=image/resize,m_fill,h_240,w_320' },
{ src: 'http://chzflive.caihome.cn/web/o_1c7390v9q1al1rak17g2v3uhc438?x-oss-process=image/resize,m_fill,h_240,w_320' }
]
}
}
}
API
vue-better-swiper component attributes:
| Attr.Name | Description | Required | Default Value | |-----|-----|-----|-----| | height | container/img height | Y | 'auto' | | autoplay | autoplay next | N | '' | | change | swiper change event | N | - |