Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ElemeFE/vue-swipe
A touch slider for vue.js.
https://github.com/ElemeFE/vue-swipe
Last synced: 8 days ago
JSON representation
A touch slider for vue.js.
- Host: GitHub
- URL: https://github.com/ElemeFE/vue-swipe
- Owner: ElemeFE
- Created: 2015-12-11T09:12:48.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2019-10-15T00:59:50.000Z (about 5 years ago)
- Last Synced: 2024-05-22T13:04:54.426Z (6 months ago)
- Language: Vue
- Size: 192 KB
- Stars: 928
- Watchers: 55
- Forks: 285
- Open Issues: 43
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-vue-cn - vue-swipe
- awesome-vue - vue-swipe - swipe?style=social) - VueJS触摸滑块 (UI组件)
- awesome-github-vue - vue-swipe - VueJS触摸滑块 (UI组件)
- awesome - vue-swipe - VueJS触摸滑块 (UI组件)
- awesome-github-vue - vue-swipe - VueJS触摸滑块 (UI组件)
README
# vue-swipe
vue-swipe is a touch slider for Vue.js.
## Install
```bash
$ npm install vue-swipe
```
## Import
### Import using module
Import components to your project:
``` js
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:
``` js
Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);
```
### Import using script tag
``` html
```
``` js
const vueSwipe = VueSwipe.Swipe;
const vueSwipeItem = VueSwipe.SwipeItem;
new Vue({
el: 'body',
components: {
'swipe': vueSwipe,
'swipe-item': vueSwipeItem
}
});
```
## Usage
Work on a Vue instance:
```HTML
```
```CSS
.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.
``` js
this.$refs.swipe.goto(newIndex)
```
For more details, please refer to example code.
## Development
Watching with hot-reload:
```bash
$ npm run dev
```
Develop on real remote device:
```bash
$ npm run remote-dev {{ YOUR IP ADDRESS }}
```
## License
MIT