Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/songyazhao/vue-plain-slider
A simple slider component for Vue.js
https://github.com/songyazhao/vue-plain-slider
component slider slider-component swiper vue
Last synced: 2 months ago
JSON representation
A simple slider component for Vue.js
- Host: GitHub
- URL: https://github.com/songyazhao/vue-plain-slider
- Owner: songyazhao
- License: mit
- Created: 2017-08-02T10:14:54.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-11T08:44:50.000Z (about 6 years ago)
- Last Synced: 2024-12-09T14:50:27.186Z (2 months ago)
- Topics: component, slider, slider-component, swiper, vue
- Language: Vue
- Size: 197 KB
- Stars: 145
- Watchers: 2
- Forks: 18
- Open Issues: 5
-
Metadata Files:
- Readme: README-EN.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-plain-slider
[](https://github.com/vuejs/vue)
[](https://www.npmjs.com/package/vue-plain-slider)
[](https://www.npmjs.com/package/vue-plain-slider)
[](https://github.com/songyazhao/vue-plain-slider/blob/master/LICENSE)
A simple slider component for Vue.js
[Zh-CN Document](https://github.com/songyazhao/vue-plain-slider)
## Features
* For async data
* Lightweight, no dependencies
* Navigation, pager and arrows
* Slider and Mouse support
* Vertical or Horizontal sliding, Align left or right
## Install
```bash
npm install --save vue-plain-slider # Or yarn add vue-plain-slider
```
## Usage
> [Example - Basic usage](https://github.com/songyazhao/vue-plain-slider/blob/master/src/views/Demo/Basic.vue)
```html
Page 1
Page 2
Page 3
import Slider from 'vue-plain-slider'
export default {
name: 'slider-demo',
components: { Slider },
methods: {
onSlideChangeStart (currentPage, el) {
console.log('onSlideChangeStart', currentPage, el);
},
onSlideChangeEnd (currentPage, el) {
console.log('onSlideChangeEnd', currentPage, el);
}
}
}
.slider {
height: 300px;
}
```
## More demo
* [Example - Complete](https://github.com/songyazhao/vue-plain-slider/blob/master/src/views/Demo/Full.vue)
*Vertical*
*Horizontal*
*Loop*
*Different children size*
*Nested grid*
* [Example - The left slide to delete](https://github.com/songyazhao/vue-plain-slider/blob/master/src/views/Demo/LeftSliderDelete.vue)
## Api
### Properties
| Name | Type | Default | Description |
|----------------------|-----------|--------------|----------------------------------------------------------------------------------------|
| align | `String` | `"left"` | Align n Orientation, Could be `'left'` or `'right'`. |
| auto | `Boolean` | `false` | Whether or not automatic carousel. |
| asyncData | `Array`、`Boolean` | `false` | For `false` that do not need the asynchronous data, when the data is asynchronous dynamic access to or need to change, must add this attribute, value and `v-for` binding in the same field |
| curPage | `Number` | `1` | Set the default start from which one. |
| direction | `String` | `"vertical"` | Could be `'horizontal'`(for horizontal slider) or `'vertical'` (for vertical slider). |
| dragEnable | `Boolean` | `true` | Whether to enable drag and drop. |
| mousewheel-control | `Boolean` | `true` | Set to `true` to enable navigation through slides using mouse wheel. |
| pagination-visible | `Boolean` | `false` | Toggle (hide/true) pagination container visibility when click on Slider's container. |
| pagination-clickable | `Boolean` | `false` | If true then clicking on pagination button will cause transition to appropriate slide. |
| performance-mode | `Boolean` | `true` | Disable advance effect for better performance. |
| loop | `Boolean` | `false` | Set to `true` to enable continuous loop mode. |
| interval | `Number` | `3000` | Trigger the next round of play time, ` auto ` is ` true ` available |
| speed | `Number` | `500` | Set transition duration of slider. |
| ----------------------------------------------- |
### Methods
| Method | Description |
|-------------------|--------------------------|
| next() | Go next page. |
| prev() | Go previous page. |
| setPage(`Number`) | Set current page number. |
### Events
| Name | Arguments | Description |
|--------------------|------------------------|------------------------------------------------------------------------|
| slide-change-start | `pageNumber` `element` | Fire in the beginning of animation to other slide (next or previous). |
| slide-change-end | `pageNumber` `element` | Will be fired after animation to other slide (next or previous). |
| slide-revert-start | `pageNumber` `element` | Fire in the beginning of animation to revert slide (no change). |
| slide-revert-end | `pageNumber` `element` | Will be fired after animation to revert slide (no change). |
| slider-move | `offset` | Callback function, will be executed when user touch and move
finger over Swiper and move it. Receives swiper instance and
'touchmove' event as an arguments. |
## License
[MIT](https://github.com/songyazhao/vue-plain-slider/blob/master/LICENSE)