pldaily/vue-pc-swipe

🌈A lightweight vue swipe component that making the slides fade work in pc

vue-pc-swipe

Overview

A lightweight vue swipe component that making the slides fade work in pc.

demo

Install

Install vue-pc-swipe

npm install vue-pc-swipe

Import vue-pc-swipe

ES6/commonjs import style is supported.

// ES6
import {Swipe, SwipeItem} from 'vue-pc-swipe';

// commonjs
var Swipe = require("vue-pc-swipe").Swipe;
var SwipeItem = require("vue-pc-swipe").SwipeItem;

Usage

<swipe ref="myPcSwipe" :continuous="true" :auto="5000" :startSlide="3" @change="chageSwipe">
  <swipe-item>
    <div>slide0</div>
  </swipe-item>
  <swipe-item>
    <div>slide1</div>
  </swipe-item>
  <swipe-item>
    <div>slide2</div>
  </swipe-item>
</swipe>

expand

you can use change function add indicators、prev or next button.demo

options

Attributes

Option	Description
continuous	Boolean(default: true) create an infinite feel with no endpoints
auto	Number(default: 5000) speed of prev and next transitions in milliseconds
startSlide	Number(defalut: 0) index position Swipe should start at

Events

Option	Description
prev()	slide to prev
next()	slide to next
getPos()	returns current slide index position
getNumSlides()	returns the total amount of slides
slide(index)	slide to set index position
change(index)	runs at slide change, index is the current slide index position

LICENSE

MIT@PLDaily