vue-swipe
vue-swipe is a touch slider for Vue.js.
Install
$ npm install vue-swipe
Import
Import using module
Import components to your project:
;// in ES6 modules;// in CommonJSconst Swipe SwipeItem = ;// in Global variableconst Swipe SwipeItem = VueSwipe;
And register components:
Vue;Vue;
Import using script tag
const vueSwipe = VueSwipeSwipe;const vueSwipeItem = VueSwipeSwipeItem;el: 'body'components:'swipe': vueSwipe'swipe-item': vueSwipeItem;
Usage
Work on a Vue instance:
<swipe class="my-swipe"> <swipe-item class="slide1"></swipe-item> <swipe-item class="slide2"></swipe-item> <swipe-item class="slide3"></swipe-item></swipe>
.my-swipe { height: 200px; color: #fff; font-size: 30px; text-align: center;} .slide1 { background-color: #0089dc; color: #fff;} .slide2 { background-color: #ffd705; color: #000;} .slide3 { background-color: #ff2d4b; color: #fff;}
Options
Props
Option | Type | Description | Default |
---|---|---|---|
speed | Number | Speed of animation | 300 |
defaultIndex | Number | Start swipe item index | 0 |
disabled | Boolean | Disable user drag swipe item | false |
auto | Number | Delay of auto slide | 3000 |
continuous | Boolean | Create an infinite slider without endpoints | true |
showIndicators | Boolean | Show indicators on slider bottom | true |
noDragWhenSingle | Boolean | Do not drag when there is only one swipe-item | true |
prevent | Boolean | preventDefault when touch start, useful for some lower version Android Browser (4.2, etc) |
false |
propagation | Boolean | solve nesting | false |
disabled | Boolean | disabled user swipe item | false |
Events
Event Name | Description | params |
---|---|---|
change | triggers when current swipe-item change | new swipe item Index, old swipe item Index |
FAQ
How to programminly swipe to an item?
Use ref and call goto()
method.
this$refsswipe
For more details, please refer to example code.
Development
Watching with hot-reload:
$ npm run dev
Develop on real remote device:
$ npm run remote-dev {{ YOUR IP ADDRESS }}
License
MIT