2.4.0 • Published 7 years ago
vue-swipe v2.4.0
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:
require('vue-swipe/dist/vue-swipe.css');
// in ES6 modules
import { Swipe, SwipeItem } from 'vue-swipe';
// in CommonJS
const { Swipe, SwipeItem } = require('vue-swipe');
// in Global variable
const { Swipe, SwipeItem } = VueSwipe;
And register components:
Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);
Import using script tag
<link rel="stylesheet" href="../node-modules/vue-swipe/dist/vue-swipe.css" charset="utf-8">
<script src="../node-modules/vue-swipe/dist/vue-swipe.js"></script>
const vueSwipe = VueSwipe.Swipe;
const vueSwipeItem = VueSwipe.SwipeItem;
new Vue({
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.$refs.swipe.goto(newIndex)
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
2.4.0
7 years ago
2.3.0
8 years ago
2.0.3
8 years ago
2.0.2
9 years ago
2.0.1
9 years ago
2.0.0
9 years ago
0.2.7
9 years ago
0.2.6
9 years ago
0.2.5
9 years ago
0.2.3
9 years ago
0.2.4
9 years ago
0.2.2
9 years ago
0.2.1
10 years ago
0.2.0
10 years ago
0.1.5
10 years ago
0.1.4
10 years ago
0.1.3
10 years ago
0.1.2
10 years ago
0.1.1
10 years ago
0.1.0
10 years ago
0.0.2
10 years ago
0.0.1
10 years ago