# vue-carousel-picture

> A vue component used for carousel picture

Latest version **1.1.2** (published 2018-01-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-carousel-picture
pnpm add vue-carousel-picture
yarn add vue-carousel-picture
bun add vue-carousel-picture
```

## 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 | 1.1.2 |
| Published | 2018-01-10 |
| First published | 2018-01-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Author | zhangfuli |
| Maintainers | justcoding |

## Links

- npm: https://www.npmjs.com/package/vue-carousel-picture
- npm.io page: https://npm.io/package/vue-carousel-picture

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.5.2
- [node-sass](https://npm.io/package/node-sass.md) ^4.7.2
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.1
- [sass-loader](https://npm.io/package/sass-loader.md) ^6.0.6

## Recent versions

- 1.1.2 (latest) — 2018-01-10
- 1.1.0 — 2018-01-10
- 1.0.9 — 2018-01-10
- 1.0.8 — 2018-01-10
- 1.0.4 — 2018-01-10
- 1.0.3 — 2018-01-10
- 1.0.2 — 2018-01-10
- 1.0.1 — 2018-01-10

## README

# vue-carousel-picture

> A vue component used for carousel picture

## 安装及依赖

### 本组件用到的依赖包如下
``` bash

# vue-style-loader
npm install --save vue-style-loader

# css-loader
npm install --save css-loader

# node-sass sass-loader
npm install node-sass sass-loader
```

### 安装
### 使用时，仅需执行如下命令
``` bash

npm install --save vue-carousel-picture

```
### 环境
``` bash

"webpack": "^3.6.0",
"vue": "^2.5.2"

```



## demo
    <template>
      <div class="hello">
        <VueCarouselPicture :slides="slides" :inv="inv" :style="styleObject" :name="transitionName1" :target="target"></VueCarouselPicture>
      </div>
    </template>
    
    <script>
      import VueCarouselPicture from 'vue-carousel-picture';
      import Css from 'vue-carousel-picture/dist/vue-carousel-picture.min.css'
      import datu from '../../static/img/datu.jpg';
    
    export default {
      name: 'HelloWorld',
      data () {
        return {
          slides: [{      //图片路径
            src: datu,
            href: ''
          },
            {
              src: datu,
              href: ''
            },{
              src: datu,
              href: ''
            }],
          styleObject: {
            width: '100%',
            height: '400px'
          },
          inv: 1000,    //滑动周期
          transitionName1: 'move',  //渐变方式
          transitionName2: 'fade',
          target: '_blank'
        }
      },
      components:{
        VueCarouselPicture
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
   
    </style>

### 参数解释
##### slides 轮播图片的地址为json数组
##### styleObject 轮播图的大小
##### inv 图片切换的周期
##### transitionName1与transitionName2 两种图片切换方式


For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

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