vue-swiper

vue swiper for vue 2.0. light weight and simple

Examples

basic demo

Install

npm install vue-light-swiper --save-dev

Usage

import Vue from 'vue'
import VueSwiper from 'vue-light-swiper'

new Vue({
    el: 'body',
    components: {
        vueSwiper: VueSwiper.vueSwiper,
        vueSwiperSlide: VueSwiper.vueSwiperSlide
    },
    methods: {
        slideChange(index, oldIndex){
            console.log('showIndexChange:', index, oldIndex);
        },
    }
});

<vue-swiper indicators @slide-change="slideChange">
    <vue-swiper-slide>Page 1</vue-swiper-slide>
    <vue-swiper-slide>Page 2</vue-swiper-slide>
    <vue-swiper-slide>Page 3</vue-swiper-slide>
</vue-swiper>

Usage in ssr

import {vueSwiper, vueSwiperSlide} from 'vue-light-swiper/src';

Use lazyload

<vue-swiper uselazyload :preload="1">
    <vue-swiper-slide class="swiper-item" :key="item.src" v-for="(item, index) in bannerList">
        <img class="lazy" :data-src="item.src">
    </vue-swiper-slide>
</vue-swiper>

Api

Properties

Name	Type	Default	Description
showIndex	Number	0	Set the swiper item show index, can use .sync modifier.
auto	Number	0	Set the swiper autoplay interval time, unit ms.
defaultDuration	Number	300	Set the swiper defaultDuration for transitionDuration, unit ms.
loop	Boolean	false	Set whether you need swiper loop.
vertical	Boolean	false	Set whether you need a vertical swiper.
indicators	Boolean	false	Set whether you need indicators.
limit	Number	20	Set the limit of swiper slide change, unit px.
uselazyload	Boolean	false	Set whether use lazyload.
preload	Number	0	Set lazyload preload number.
baseWidth	Number	0	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.)
baseHeight	Number	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.)
baseSizeDom	String、dom	``	Set swiper base width and height with a dom or a selector.(priority is lower than baseWidth and baseHeight)

Events

Name	Parameters	Description
slide-change	index, oldIndex	Fire when the slide changed .
slide-end	index	Fire when the slide animation end .

License

MIT

Copyright (c) 2017-present, zhengjiaqi