V slider

A slider implement by vuejs

Version: 1.0.0 Updated: 10/21/2016

By: lakb248 License: ISC

Downloads Last 30 Days: 63

Install

npm i v-slider
yarn add v-slider

Repository: https://github.com/lakb248/v-slider

CDNs

bundle.run: https://bundle.run/v-slider

jsDelivr: https://cdn.jsdelivr.net/npm/v-slider

unpkg: https://unpkg.com/v-slider

v-slider

Build Status codecov

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

Categories: Vue js