Minimal Swiper Component For Vue.js 2

Install & Download:

# NPM
$ npm install vue-light-swiper --save

Description:

A simple, lightweight, horizontal/vertical swiper component for Vue.js 2+ apps.

Usage:

new Vue({
    el: '#app',
    components: {
        vueSwiper: VueSwiper.vueSwiper,
        vueSwiperSlide: VueSwiper.vueSwiperSlide
    },
    data: {
        showIndex1: 0,
        showIndex2: 0,
        bannerList: [
            {
                src: "1.jpeg",
                url: "#"
            },
            {
                src: "2.jpeg",
                url: "#"
            },
            {
                src: "3.jpeg",
                url: "#"
            },
            {
                src: "4.jpeg",
                url: "#"
            }
        ]
    },
    methods: {
        slideChange(index, oldIndex){
            console.log('slideChange:', index, '  oldIndex:' ,oldIndex);
        },
        appendSlide: function (slideText) {
            this.bannerList.push({
                src: 'more.jpeg',
                url: "#"
            });
        },
        prevSlide1: function () {
            this.showIndex1 = this.showIndex1 - 1;
        },
        nextSlide1: function () {
            this.showIndex1 = this.showIndex1 + 1;
        },
        prevSlide2: function () {
            this.showIndex2 = this.showIndex2 - 1;
            console.log('prevSlide',this.showIndex);
        },
        nextSlide2: function () {
            this.showIndex2 = this.showIndex2 + 1;
        }
    }
});

Default props:

name: 'vueSwiper',
props: {
// the swiper item show index, start with 0
showIndex: {
    type: Number,
    default: 0
},
// the swiper autoplay interval time，accept Number, unit ms
auto: {
    type: Number,
    default: 0
},
// the swiper defaultDuration for transitionDuration
defaultDuration: {
    type: Number,
    default: 300
},
// set whether you need loop
loop: {
    type: Boolean,
    default: false
},
// set whether you need a vertical swiper
vertical: {
    type: Boolean,
    default: false
},
// set swiper base width, unit px. default width is swiper's width,
// but when you init a swiper with invisible, default width can not be set right,
// you need set base width in this time.
baseWidth: {
    type: Number,
    default: 0
},
// set swiper base height, unit px. need when vertical, default height is swiper's height,
// but when you init a swiper with invisible, default height can not be set right,
// you need set base height in this time.
baseHeight: {
    type: Number,
    default: 0
},
// set swiper base width and height with a dom or a selector. default size is swiper's size,
// but when you init a swiper with invisible, default width and height can not be set right,
// you need set base size dom in this time, base width and height will according to this dom.
baseSizeDom: {},
// set whether you need indicators
indicators: {
    type: Boolean,
    default: false
},
// the limit of swiper slide change, unit px
limit: {
    type: Number,
    default: 20
},
// whether use lazyload
uselazyload: {
    type: Boolean,
    default: false
},
// lazyload preload number
preload: {
    type: Number,
    default: 0
}