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	-