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

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | list | banner图片列表 | Array | [] | | direction | 轮播图轮播方向 | String | ‘horizontal’ | | showDots | 是否显示dot | Boolean | true | | height | 图片高度 | String | '180px' | | auto | 是否自动轮播 | Boolean | false | | loop | 是否无缝轮播 | loop | false | | duration | 轮播动画时长 | Number | 450 | | interval | 轮播动画间隔 | Number | 4000 | | minMovingDistance | touchmove最小距离 | Number | 30 | | className | 样式 | String | '' | | isBroadcast | 是否已广播的形式展示 | Boolean | false |

EVENT

| 事件 | 说明 | 返回值 | | --- | --- | ----- | | swiperEnd | 每次轮播结束触发 | 当前swiper实例 | | selectItem | 当前点击的图片 | currentIndex |