v-slider
A slider implement by vuejs
Demo
Usage
Install
npm install v-slider --save
And, if you are using vue 2.0
npm install v-slider@next --save
CommonJS
var VSlider = ; components: 'v-slider': VSliderSliderContainer 'slider-item': VSliderSliderItem template: '<div id="vue-slider-container" style="height: 300px;">\ <v-slider :speed="1000" :arrow="true" :dot="true">\ <slider-item>\ <div style="display:none;background-color:red;height:100%;">SliderA</div>\ </slider-item>\ <slider-item>\ <div style="display:none;background-color:blue;height:100%;">SliderB</div>\ </slider-item>\ <slider-item>\ <div style="display:none;background-color:green;height:100%;">SliderC</div>\ </slider-item>\ </v-slider>\ </div>';
ES6
; components: 'v-slider': VSliderSliderContainer 'slider-item': VSliderSliderItem template: '<div id="vue-slider-container" style="height: 300px;">\ <v-slider :speed="1000" :arrow="true" :dot="true">\ <slider-item>\ <div style="display:none;background-color:red;height:100%;">SliderA</div>\ </slider-item>\ <slider-item>\ <div style="display:none;background-color:blue;height:100%;">SliderB</div>\ </slider-item>\ <slider-item>\ <div style="display:none;background-color:green;height:100%;">SliderC</div>\ </slider-item>\ </v-slider>\ </div>';
Props
Property | Description |
---|---|
speed | the translation speed of sliders, default 300 |
auto | the interval of each slide, default 3000 |
dot | show dot indicator or not, default true |
arrow | show arrow indicator or not, default true |