Node Permanently Moved

    good-swiper

    1.0.4 • Public • Published

    A lightweight swiper component based on Vue

    Install

    npm install good-swiper --save-dev

    Screenshots

    "good-swiper"

    Live Demo

    点击查看

    Usage

    // main.js
    import Vue from 'vue'
    import { Swiper, SwiperItem } from 'vue-swiper'
     
    Vue.component(Swiper.name, Swiper)
    Vue.component(SwiperItem.name, SwiperItem)
    <!-- App.vue -->
    <template>
      <div>
        <!-- 轮播图容器组件 -->
        <swiper>
          <!-- 单个轮播图组件 -->
          <swiper-item>
            <img src="src" />
          </swiper-item>
        </swiper>
     
        <!-- 支持列表渲染 -->
        <swiper>
          <swiper-item v-for="item in list" :key="item">
            <img :src="item" />
          </swiper-item>
        </swiper>
     
      </div>
    </template>

    Swiper Props

    Prop Type Description Default
    interval Number 轮播图切换时间间隔 3000ms
    duration Number 切换一个轮播图的过渡时间 300ms
    autoplay Boolean 是否自动播放 false
    trigger String 指示器触发方式(可选值为 click | hover) click
    direction String 轮播图默认滚动方向(可选值为:left | right) left
    height String 轮播图容器高度 (单位"px") 300px

    Swiper Methods

    Name Description ReturnValue
    play 播放轮播图 undefined
    pause 暂停轮播图 undefined

    Install

    npm i good-swiper

    DownloadsWeekly Downloads

    0

    Version

    1.0.4

    License

    ISC

    Unpacked Size

    2.52 MB

    Total Files

    22

    Last publish

    Collaborators

    • konglingwen