vue-pure-slider, A simple vue component, Easy use, Easy configuration, Compatible Mobile&PC
npm install vue-pure-slider --save<template>
<div id="sliderWrap">
<pure-slider container="sliderWrap" :items='items'></pure-slider>
</div>
</template>
<script>
import pureSlider from 'vue-pure-slider';
export default {
components: {
pureSlider
},
data () {
return {
items:[
{
title: 'pic1',
imgUrl: 'http://kuscript.com/vue-pure-slider/img/slider1.jpg',
link: ''
},
{
title: 'pic2',
imgUrl: 'http://kuscript.com/vue-pure-slider/img/slider2.jpg',
link: ''
},
{
title: 'pic3',
imgUrl: 'http://kuscript.com/vue-pure-slider/img/slider3.jpg',
link: ''
}
],
}
}
}
</script>or
<html>
<body>
<div id="wrap">
<vue-pure-slider container="wrap" :items='items'></vue-pure-slider>
</div>
<script src="***/vue.min.js"></script>
<script src="***/dist/index.js"></script>
<script>
new Vue({
el: '#wrap',
data: {
items() {
return [
{
title: 'pic1',
imgUrl: 'http://kuscript.com/vue-pure-slider/img/slider1.jpg',
link: ''
},
{
title: 'pic2',
imgUrl: 'http://kuscript.com/vue-pure-slider/img/slider2.jpg',
link: ''
},
{
title: 'pic3',
imgUrl: 'http://kuscript.com/vue-pure-slider/img/slider3.jpg',
link: ''
}
]
}
}
});
</script>
</body>
</html>| Option | Type | Required | Default | Description |
|---|---|---|---|---|
container |
String | Yes | '' | Slider wrapper id |
items |
Array | Yes | [] | Slider list｛title:'title', imgUrl: 'picture src', link: 'Slider link'｝ |
start |
Number | - | 0 | Slider start position |
continue |
Boolean | - | true | Loop slide |
auto |
Number | - | 4000 | Auto play time interval (ms) |
speed |
Number | - | 300 | Slide duration (ms) |
propagation |
Boolean | - | true | Event stopPropagation |
slidefn |
Function | - | - | Sliding callback function |
endfn |
Function | - | - | End of slide callback function |
https://github.com/blackie4/vue-pure-slider/issues
MIT