Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shhdgit/vue-easy-slider
Slider Component of Vue.js.
https://github.com/shhdgit/vue-easy-slider
carrousel slider slides swipe swiper vue-directive vue-plugin vue-slider vue-swiper
Last synced: 6 days ago
JSON representation
Slider Component of Vue.js.
- Host: GitHub
- URL: https://github.com/shhdgit/vue-easy-slider
- Owner: shhdgit
- License: mit
- Created: 2016-08-12T16:41:35.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-03-07T07:26:01.000Z (10 months ago)
- Last Synced: 2024-12-29T17:06:55.718Z (13 days ago)
- Topics: carrousel, slider, slides, swipe, swiper, vue-directive, vue-plugin, vue-slider, vue-swiper
- Language: JavaScript
- Homepage:
- Size: 268 KB
- Stars: 355
- Watchers: 10
- Forks: 65
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome - shhdgit/vue-easy-slider - Slider Component of Vue.js. (JavaScript)
- awesome-github-vue - vue-easy-slider - Vue 2.x的滑块组件 (UI组件)
- awesome-github-vue - vue-easy-slider - Vue 2.x的滑块组件 (UI组件)
- awesome - vue-easy-slider - Vue 2.x的滑块组件 (UI组件)
- awesome-vue - vue-easy-slider - easy-slider?style=social) - Vue 2.x的滑块组件 (UI组件)
README
# vue-easy-slider
[](https://travis-ci.com/shhdgit/vue-easy-slider)
[](https://prettier.io/)
[](https://www.npmjs.org/package/vue-easy-slider)
[](https://npmjs.org/package/vue-easy-slider)
[](https://github.com/shhdgit/vue-easy-slider/blob/master/LICENCE)
Keep slider simple!
## Demo
[demo](https://codesandbox.io/embed/vnynj6o500)
## Install
```bash
npm i -S vue-easy-slider
```
## Usage
Plugin install:
```js
import Vue from 'vue'
import EasySlider from 'vue-easy-slider'
Vue.use(EasySlider)
```
Or work on a Vue instance:
```HTML
Page{{ index + 1 }}
```
```JavaScript
import { Slider, SliderItem } from 'vue-easy-slider'
new Vue({
el: 'body',
components: {
Slider,
SliderItem,
},
data() {
return {
list: [
{ backgroundColor: '#3f51b5', width: '100%', height: '100%' },
{ backgroundColor: '#eee', width: '100%', height: '100%' },
{ backgroundColor: '#f44336', width: '100%', height: '100%' },
],
}
},
methods: {
hello($event) {
console.log(`hello index: ${$event}`)
},
},
})
```
Control slider with v-model
```HTML
...
move to page 3
```
```JavaScript
...
data() {
return {
// initial index
sliderIndex: 1,
list: [
{ backgroundColor: '#3f51b5', width: '100%', height: '100%' },
{ backgroundColor: '#eee', width: '100%', height: '100%' },
{ backgroundColor: '#f44336', width: '100%', height: '100%' },
],
}
},
methods: {
moveToIndex(index) {
this.sliderIndex = index
},
},
...
```
## Props
Slider：
| name | type | default | description |
| --------------- | -------------------------------- | ---------- | ---------------------------------------------------------------------- |
| width | String | auto | Slider width |
| height | String | 300px | Slider height |
| touch | Boolean | true | Enable touch slide |
| animation | 'normal', 'fade' | 'normal' | Change animation |
| autoplay | Boolean | true | Autoplay |
| stopOnHover | Boolean | false | Stop autoplay when hover |
| interval | Number | 3000 | Delay of autoplay ( autoplay option should be true ) |
| speed | Number | 500 | Speed(ms) of animation |
| indicators | 'center', 'left', 'right', false | 'center' | Show indicators on option position or hide indicators |
| control-btn | Boolean | true | Show control button |
| before-next | Function | () => true | Before next guard, sliding to next item when this function return true |
| before-previous | Function | () => true | Before previous guard |
## Events
Slider：
| name | description | $event |
| -------- | -------------------------------------------------------- | ---------------------------------- |
| change | Fires when the slide change | number // index of slides |
| next | Fires when the button for the next slide was pressed | { original: number, next: number } |
| previous | Fires when the button for the previous slide was pressed | { original: number, next: number } |
## Slots
SliderItem：
| name | description |
| ------- | ------------------- |
| default | Item content |
| loading | Loading placeholder |
usage:
```HTML
![]()
custom loading ...
```
# License
MIT