A simple, light and configurable vue silder component.
use npm
npm install vue-html-slider
use yarn
yarn add vue-html-slider
Just one property is required to start the slider as follows.
<!--vue template-->
<template>
<vue-html-slider :data="images"></vue-html-slider>
</template>
<script>
import vueHtmlSlider from 'vue-html-slider';
export default {
components: {
'vue-html-slider': vueHtmlSlider
},
data() {
return {
images: [
'http://path/to/a.png',
'http://path/to/b.png'
]
}
}
}
</script>
With just a few steps, you can create a slider application. As well, there is an online demo which provides a real experience for you.
Slider defines many properties for customizing what you want. You can set the options
property to slider as follow.
<template>
<vue-html-slider :options="options"></vue-html-slider>
</template>
<script>
// ...
export default {
// ...
data() {
return {
options: {
index: 0,
lazyload: true,
useFade: true,
click() {
// user click event callback.
}
}
}
}
}
</script>
The options
contains many properties. All properties are listed below.
Property | Type | default/params | Description |
---|---|---|---|
index | Number | 0 | Default image position index. |
autoplay | Boolean | false | Whether autoplay, not implement. |
interval | Number | 1000 | Autoplay interval mills, not implement. |
loop | Boolean | false | Playing slider with loop, not implement. |
clsName | String | - | Apply a css class on image element. |
gapWidth | Number | 0 | You can set a gap between each image. |
useFade | Boolean | false | Apply fade animation to image when appears. |
lazyload | Boolean | false | The image will be loaded only appears, if true. |
zoom | Boolean | false | You can zoom picture scale by gesture if set true, not implement. |
loading | String | - | It will be shown before loaded. A html template or characters are supported. |
error | String | - | It will be shown after load error. A html template or characters are supported. |
hideIndicator | Boolen | false | Whether hide page number on bottom of image. As well, it can display 20 indicators at most. |
isDebug | Boolean | false | In Debug mode, slider will print some log infos by console.log . |
disableBounce | Boolen | false | Whether disable bounce when reached slider boundary. |
changed | Function | image | It will be fired when image position changed. |
click | Function | image | A click event fired on image element. |
longTap | Function | image | A longTap event on image element. |
longTapEnd | Function | image | It will be fired when the longTap event completes. |
You can move more when reached slider left or right boundary if you set disableBounce
false. So, you can listen the event by setting the pull-left
or pull-right
property to slider as follows.
<template>
<vue-html-slider :pull-left="pullLeft"></vue-html-slider>
</template>
<script>
// ...
export default {
// ...
data() {
return {
pullLeft: {
tpl: '<div class="foo">query all</div>',
pull(x) {
// pulling continuously.
},
release(x) {
// released.
}
}
}
}
}
</script>
The pull-left
and pull-right
have three properties respectively as follows.
Property | Type | params | Description |
---|---|---|---|
tpl | String | - | A html template will be shown when beyond slider boundary. Characters are also supported. |
pull | Function | x | A pull event will be fired continuously before released. |
release | Function | x | A release event will be fired when released. |
The
pull
orrelease
parameterx
refers to the distance that page leaves the boundary which is an absolute value.
This project is licensed under the MIT License. See the LICENSE.md file for details.