vue-pc-swipe
vue-pc-swipe
Overview
A lightweight vue swipe component that making the slides fade work in pc.
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
Dependencies
Dependencies
babel-core: ^6.26.0babel-loader: ^7.1.2babel-preset-es2015: ^6.24.1clean-webpack-plugin: ^0.1.17css-loader: ^0.28.7eslint: ^4.12.1eslint-config-standard: ^10.2.1eslint-loader: ^1.9.0eslint-plugin-html: ^4.0.1eslint-plugin-import: ^2.8.0eslint-plugin-node: ^5.2.1eslint-plugin-promise: ^3.6.0eslint-plugin-standard: ^3.0.1extract-text-webpack-plugin: ^3.0.2file-loader: ^1.1.5html-webpack-plugin: ^2.30.1node-sass: ^4.7.2sass-loader: ^6.0.6vue-loader: ^13.5.0vue-template-compiler: ^2.5.9webpack: ^3.10.0webpack-dev-server: ^2.9.7