Negligent Parachute Maintainers

    v-swiper

    2.0.6 • Public • Published

    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

    Install

    npm i v-swiper

    DownloadsWeekly Downloads

    1

    Version

    2.0.6

    License

    MIT

    Unpacked Size

    23.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • wks