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