vue-better-swiper

    1.1.2 • Public • Published

    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 -

    Install

    npm i vue-better-swiper

    DownloadsWeekly Downloads

    14

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    107 kB

    Total Files

    13

    Last publish

    Collaborators

    • lzyerliu