img-swipe v1.0.5

img-swipe

A flexible, excellent and smart img swipe component for pc and mobile.

based on vue2.x

基于 Vue2.x 开发的图片轮播组件。支持手机版PC版。 完美支持 自动轮播、无限轮播、手势切换轮播、自适应高度、上一页下一页切换、索引指示、小圆点分页指示等常用功能。

在线演示

说明文档

Example

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

and then browse to http://localhost:8080

Import

Import components to your project:

Registe global component in main.js:

import {ImgSwipe,ImgSwipeItem} from 'img-swipe'

Vue.component('img-swipe', ImgSwipe);
Vue.component('img-swipe-item', ImgSwipeItem);

Registe component in page:

import {ImgSwipe,ImgSwipeItem} from 'img-swipe'

export default {
  components: { ImgSwipe, ImgSwipeItem }
}

Usage

//基本用法,切换时默认会根据图片自动计算高度

<img-swipe>
    <img-swipe-item><img src="./img/1.jpg"></img-swipe-item>
    <img-swipe-item><img src="./img/2.jpg"></img-swipe-item>
    <img-swipe-item><img src="./img/3.jpg"></img-swipe-item>
</img-swipe>

// 自定义高度，需配置:auto-height="false"

<img-swipe :auto-height="false" style="height: 100px">
    <img-swipe-item><img src="./img/1.jpg"></img-swipe-item>
    <img-swipe-item><img src="./img/2.jpg"></img-swipe-item>
    <img-swipe-item><img src="./img/3.jpg"></img-swipe-item>
</img-swipe>

// 自动播放 :auto-play="true"

<img-swipe :auto-play="true">
    <img-swipe-item><img src="./img/1.jpg"></img-swipe-item>
    <img-swipe-item><img src="./img/2.jpg"></img-swipe-item>
    <img-swipe-item><img src="./img/3.jpg"></img-swipe-item>
</img-swipe>

//显示上下页切换按钮 :nav="true"

<img-swipe :nav="true">
    <img-swipe-item><img src="./img/1.jpg"></img-swipe-item>
    <img-swipe-item><img src="./img/2.jpg"></img-swipe-item>
    <img-swipe-item><img src="./img/3.jpg"></img-swipe-item>
</img-swipe>

// 隐藏分页小原点 :pagination="false"

<img-swipe :pagination="false">
    <img-swipe-item><img src="./img/1.jpg"></img-swipe-item>
    <img-swipe-item><img src="./img/2.jpg"></img-swipe-item>
    <img-swipe-item><img src="./img/3.jpg"></img-swipe-item>
</img-swipe>

// 显示页号  :indexNum="true"

<img-swipe :indexNum="true">
    <img-swipe-item><img src="./img/1.jpg"></img-swipe-item>
    <img-swipe-item><img src="./img/2.jpg"></img-swipe-item>
    <img-swipe-item><img src="./img/3.jpg"></img-swipe-item>
</img-swipe>

//切换时回调事件 @on-index="showInfo"

<img-swipe @on-index="showInfo">
    <img-swipe-item><img src="./img/1.jpg"></img-swipe-item>
    <img-swipe-item><img src="./img/2.jpg"></img-swipe-item>
    <img-swipe-item><img src="./img/3.jpg"></img-swipe-item>
</img-swipe>

//js
export default {
    methods: {
        showInfo(info){
            this.info = info
        }
    }
}

Options

Props

Events

Thanks

• ElemeFE/vue-swipe

License

The plugin is open-sourced software licensed under the MIT license.

Contact

Author:ck

Email:bebe8@qq.com

安装失败解决方法

# 卸载本地安装的webpack-cli，全局安装webpack-cli：
npm uninstall webpack-cli
npm install -g webpack-cli

npm i