1.0.4 • Published 4 years ago

good-swiper v1.0.4

Weekly downloads
4
License
ISC
Repository
-
Last release
4 years ago

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

PropTypeDescriptionDefault
intervalNumber轮播图切换时间间隔3000ms
durationNumber切换一个轮播图的过渡时间300ms
autoplayBoolean是否自动播放false
triggerString指示器触发方式(可选值为 click | hover)click
directionString轮播图默认滚动方向(可选值为:left | right)left
heightString轮播图容器高度 (单位"px")300px

Swiper Methods

NameDescriptionReturnValue
play播放轮播图undefined
pause暂停轮播图undefined
1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago