# vue-swiper-component

> a swiper component for vue

Latest version **2.1.3** (published 2018-07-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-swiper-component
pnpm add vue-swiper-component
yarn add vue-swiper-component
bun add vue-swiper-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.3 |
| Published | 2018-07-23 |
| First published | 2017-12-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 581 |
| Author | zwh |
| Maintainers | zwhgithub |
| Keywords | vue-swiper, swiper, vue-slide, slide |

## Links

- npm: https://www.npmjs.com/package/vue-swiper-component
- Repository: https://github.com/zwhGithub/vue-swiper
- Homepage: https://github.com/zwhGithub/vue-swiper#readme
- Issues: https://github.com/zwhGithub/vue-swiper/issues
- npm.io page: https://npm.io/package/vue-swiper-component

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 2.1.3 (latest) — 2018-07-23
- 2.1.2 — 2018-06-02
- 2.1.0 — 2018-05-12
- 2.0.4 — 2018-04-25
- 2.0.2 — 2018-03-07
- 2.0.1 — 2018-02-27
- 2.0.0 — 2018-02-27
- 1.0.5 — 2018-01-27
- 1.0.4 — 2018-01-13
- 1.0.3 — 2018-01-13
- 1.0.2 — 2018-01-12
- 1.0.11 — 2017-12-26
- 1.0.0 — 2017-12-26

## README

## vue-swiper

*   基于 Vue2.0 开发，基本满足大部分功能
*   轻量、高性能轮播插件。目前支持 无缝衔接自动轮播、无限轮播、手势轮播
*   没有引入第三方库，原生 js 封装,打包之后只有 8.2KB 大小 性能还是杠杠滴

## [github地址](https://github.com/zwhGithub/vue-swiper/)

## demo

![效果](http://zwhgithub.github.io/vue-swiper/dist/1514291260.png)

🎉 觉得好用给一个 star 哦~ 🎉

## Install

```javascript
npm i vue-swiper-component --save
cnpm i vue-swiper-component --save  //国内镜像
```

## Usage

```javascript
import { Swiper, Slide } from 'vue-swiper-component';

components: {
    Swiper,
    Slide
}

//异步加载轮播图的情况
  <Swiper v-if="list.length > 0">
       <Slide v-for="(item,index) in list" :key="index">
       </Slide>
  </Swiper>


 //同步加载轮播图情况
  <Swiper>
       <Slide>
               1
       </Slide>
       <Slide>
       		2
       </Slide>
       <Slide>
       		3
       </Slide>
  </Swiper>

    //加一些参数配置情况
  <Swiper v-if="slidesReal.length > 0" :autoPlay='true' :showIndicator='true' interval="2500" duration="500">
        <Slide @click="clickMe" v-for="(item,index) in slidesReal" :key="index">
        	//添加click事件
        </Slide>
   </Swiper>
```

## API

| 属性          | 说明                     | 默认 |
| ------------- | ------------------------ | ---- |
| autoPlay      | 是否自动轮播             | true |
| showIndicator | 是否显示轮播的那个点     | true |
| interval      | 每两次隔多久滚动一次     | 2500 |
| duration      | 每次滚动一页需要多久时间 | 500  |

```javascript
✅  Swiper 上面还暴露了其他方法,在 Swiper 标签上添加 ref 属性, 例如: <Swiper ref="swiper"></Swiper>

    ✅  this.$refs.swiper.prevSlide(); // 上一张图
    ✅  this.$refs.swiper.nextSlide(); // 下一张图
    ✅  this.$refs.swiper.slideTo(2); //某一张图
```

## 事件

```
transtionend 事件  每次轮播出发 参数表示轮播到第几个图片 在Swiper上添加
// @transtionend="getNum"    getNum(data) {console.log(data);}
click  事件 每个轮播图上的事件
```

## Other

*   可以通过覆盖我的样式进行自定义样式，Slide 标签里面可以写 div 或者其他的东西
*   一些参数配置可以参考上面 Usage 第三个示例，异步渲染要加 v-if 保证渲染成功 参考第一个示例
*   如果其他问题可以邮箱沟通，zwhcoder@gmail.com;
*   暂时对 PC 支持不是很友好，等以后有时间了可以加上;

---
_Source: https://npm.io/package/vue-swiper-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._