# vue-smooth-touch-slide

> A smooth touch slide for vue

Latest version **2.0.3** (published 2017-01-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-smooth-touch-slide
pnpm add vue-smooth-touch-slide
yarn add vue-smooth-touch-slide
bun add vue-smooth-touch-slide
```

## 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.0.3 |
| Published | 2017-01-03 |
| First published | 2016-12-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | caozhaoliang |
| Maintainers | caozhaoliang |
| Keywords | vue, touch, slide, vue-touch-slide, vue-slide, vue-swipe, vue-slider |

## Links

- npm: https://www.npmjs.com/package/vue-smooth-touch-slide
- npm.io page: https://npm.io/package/vue-smooth-touch-slide

## 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.0.3 (latest) — 2017-01-03
- 2.0.2 — 2016-12-31
- 2.0.1 — 2016-12-31
- 2.0.0 — 2016-12-30
- 1.0.4 — 2016-12-22
- 1.0.3 — 2016-12-22
- 1.0.2 — 2016-12-22
- 1.0.1 — 2016-12-22
- 1.0.0 — 2016-12-22

## README

# vue-smooth-touch-slide

完全基于vue的单文件轮播组件。
解决了swiper.js在ios7 ipad和安卓微信等场景中滑动卡顿的情况。

*2.0更新文档

1.去除了对jade和stylus的依赖，只需要在vue中引入即可，不需要安装额外的包。

2.解决了旋屏后重绘(orientationchange)的BUG，现在旋屏后也可以正常显示了。

3.增加了对vue2.0的支持，同时保留vue1.0版本的支持，引入方式有所不同，详见Usage。

**2.0.3

更改了默认dot的大小，不会像巨无霸一样盘踞在右下角了。

dot宽高支持rem + dpr方案下的meta缩放，由于css的小点绘制无法使用rem(会不圆)，在data-dpr=1、2、3的情况下dot会以px单位自适应显示。

# Installation

`npm install vue-smooth-touch-slide --save`

# Usage Vue@1.0

```Javascript
<template>
    <slide :Slide="banners" :Millisec="5" :Width="'100%'" :Height="'3.125rem'" :Duration="300" :Dot="true" :Position="'right'"></slide>
</template>

<script>
    import Slide from 'vue-smooth-touch-slide/1.0/Slide.vue'

    export default {
        components: {
            Slide
        }
    }
</script>
```
# Usage Vue@2.0

```Javascript
<template>
    <slide :Slide="banners" :Millisec="5" :Width="'100%'" :Height="'3.125rem'" :Duration="300" :Dot="true" :Position="'right'"></slide>
</template>

<script>
    import Slide from 'vue-smooth-touch-slide/2.0/Slide.vue'

    export default {
        components: {
            Slide
        }
    }
</script>
```
# Props
## Slide
### type: Array
### required: true
### eg:
```Json
banners: [
    {
        img: 'http://www.caozhaoliang.com/1.jpg',
        link: 'http://www.caozhaoliang.com'
    },
    {
        img: 'http://www.caozhaoliang.com/2.jpg',
        link: 'http://www.caozhaoliang.com'
    },
    {
        img: 'http://www.caozhaoliang.com/3.jpg',
        link: 'http://www.caozhaoliang.com'
    }
]
```

## Millisec
#### type: Number
#### default: 5
轮播时间间隔

## Width
#### type: String
#### default: '100%'
轮播区域宽，默认100%，可以设置单位px、em、rem

## Height
#### type: String
#### default: '200px'
轮播区域高，默认200px，可以设置单位px、em、rem

## Duration
#### type: Number
#### default: 300
轮播动画时间,默认300ms

## Dot
#### type: Boolean
#### default: true
轮播底部点显示控制，默认显示

## Position
#### type: String
#### default: 'right'
轮播底部点显示位置，默认右下，目前仅支持右下和左下，左下请设置'left'

###Tips
如果传入轮播数组长度为1，轮播不可滚动，底部点不显示，可跳转传入link

# License

MIT

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