v-slider

v-slider

A slider implement by vuejs

Demo

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 = require('v-slider');

new Vue({
    components: {
        'v-slider': VSlider.SliderContainer,
        'slider-item': VSlider.SliderItem
    },
    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

import VSlider from 'v-slider';

new Vue({
    components: {
        'v-slider': VSlider.SliderContainer,
        'slider-item': VSlider.SliderItem
    },
    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

License

MIT