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