vue-plain-slider
Version:
A simple slider component for Vue.js
137 lines (106 loc) • 6.3 kB
Markdown
# 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
<template>
<Slider
ref="Slider"
direction="horizontal"
:mousewheel-control="true"
:performance-mode="true"
:pagination-visible="true"
:pagination-clickable="true"
:loop="true"
:speed="500"
@slide-change-start="onSlideChangeStart"
@slide-change-end="onSlideChangeEnd">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
</Slider>
</template>
<script>
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);
}
}
}
</script>
<style scoped>
.slider {
height: 300px;
}
</style>
```
## 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<br>finger over Swiper and move it. Receives swiper instance and<br>'touchmove' event as an arguments. |
## License
[MIT](https://github.com/songyazhao/vue-plain-slider/blob/master/LICENSE)