v-swiper v2.0.6

v-swiper

1. 基于 Vue2.x 开发，包含轮播图的基本功能
2. 轻量、高性能轮播插件。目前支持 无缝衔接自动轮播、无限轮播、手势轮播
3. 基于css3，transition实现的过度动画
4. 无任何第三方依赖，原生 js 封装
5. 完整的单元测试

NPM

npm i v-swiper --save | yarn add v-swiper

demo地址

引入插件

import Vue from 'vue'
import swiper from 'v-swiper'

new Vue({
    el: 'body',
    components: {swiper}
});

基本用法

<swiper :list="bannerList" height="180px" :loop="true" :auto="false" :showDots="true" v-model="swiperIndex" @selectItem="selectItem"></swiper>
<div style="margin-top: 10px"></div>
<swiper
    :list="bannerList"
    height="180px"
    :loop="true"
    :auto="true"
    direction="vertical"
></swiper>
<div style="margin-top: 10px"></div>
<div class="broadcast">
    <p></p>
    <swiper
        :isBroadcast="true"
        :showDots="false"
        :list="bannerList"
        height="30px"
        :loop="true"
        :auto="true"
    >
    </swiper>
</div>
<div style="margin-top: 10px"></div>
<div class="broadcast">
    <p></p>
    <swiper
        :isBroadcast="true"
        :showDots="false"
        :list="bannerList"
        height="30px"
        :loop="true"
        :auto="true"
        :minMovingDistance="10"
        direction="vertical"
    ></swiper>
</div>

bannerList: [
    {
        img: require('./assets/pic1.jpg'),
        href: '0',
        txt: '这是一条消息0'
    },
    {
        img: require('./assets/pic2.jpg'),
        href: '1',
        txt: '这是一条消息1'
    },
    {
        img: require('./assets/pic3.png'),
        href: '2',
        txt: '这是一条消息2'
    },
    {
        img: require('./assets/pic4.jpg'),
        href: '3',
        txt: '这是一条消息3'
    }
],

api

EVENT