vue-easy-slider is a slider component of Vue 2.x
$ npm i -S vue-easy-sliderWork on a Vue instance:
<slider animation="fade">
<slider-item v-for="(i, index) in list" :key="index">
<div :style="i">
<p style="line-height: 280px; font-size: 5rem; text-align: center;">Page{{ index + 1 }}</p>
</div>
</slider-item>
</slider>import { Slider, SliderItem } from 'vue-easy-slider'
new Vue( {
el: 'body',
data () {
return {
list: [
{ backgroundColor: '#3f51b5', width: '100%', height: '100%' },
{ backgroundColor: '#eee', width: '100%', height: '100%' },
{ backgroundColor: '#f44336', width: '100%', height: '100%' },
],
}
},
components: {
Slider,
SliderItem
}
} )Slider：
| name | type | default | description |
|---|---|---|---|
| width | String | auto | The width of the slider |
| height | String | 300px | The height of the slider |
| interval | Number | 3000 | Delay of auto slider( auto option should be true ) |
| speed | Number | 300 | Speed of animation |
| auto | Boolean | true | Autoplay |
| indicators | 'center', 'left', 'right', false | 'center' | Show indicators on option position or hidden |
| control-btn | Boolean | true | Show control button |
| animation | String - { normal, fade } | normal | Change animation |
| init-index | Number | 0 | Index of the initially active slide |
Slider：
| name | description | $event |
|---|---|---|
| changeSlide | Fires when the slide change | $event.index |
| next | Fires when the button for the next slide was pressed | $event.original, $event.next |
| previous | Fires when the button for the previous slide was pressed | $event.original, $event.next |
SliderItem:
| name | description | $event |
|---|---|---|
| onClick | Click event |
SliderItem：
| name | description |
|---|---|
| default | Item's content |
usage:
<slider>
<slider-item>
<div>
<img src="">
<p></p>
<button></button>
</div>
</slider-item>
</slider>MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent