# rc-carrousel

> react 旋转木马图片轮播组件

Latest version **1.0.5** (published 2019-01-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install rc-carrousel
pnpm add rc-carrousel
yarn add rc-carrousel
bun add rc-carrousel
```

## 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.0.5 |
| Published | 2019-01-19 |
| First published | 2019-01-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 33.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | crush |
| Maintainers | yerg5566 |

## Links

- npm: https://www.npmjs.com/package/rc-carrousel
- npm.io page: https://npm.io/package/rc-carrousel

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.7.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.7.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [react-carrousel](https://npm.io/package/react-carrousel.md) ^1.1.0

## Recent versions

- 1.0.5 (latest) — 2019-01-19
- 1.0.4 — 2019-01-19
- 1.0.3 — 2019-01-19
- 1.0.2 — 2019-01-18
- 1.0.1 — 2019-01-16
- 1.0.0 — 2019-01-14

## README

# rc-carrousel —— 一款 React 旋转木马图片轮播组件 

想写个应用发现没找到react旋转木马这种类型的轮播图组件，于是就自己写了一个;

应用，一款萌萌哒星座运势chrome插件

(https://github.com/FourPig/constellation)

> react@16.7

## 开始使用

安装

> npm i rc-carrousel -S 

> 或者

> yarn add rc-carrousel -S

使用：

```javascript
  import React from 'react';
  import Carrousel from 'rc-carrousel';

  const App=()=>{
    // 图片路径
    const imgPath = './static';
    // 图片数组，包含title 和 src 属性，按顺序渲染
    const imageArr = [
      { title:'shuangzi', src:`${ imgPath }/shuangzi.png` },
      { title:'baiyang', src:`${ imgPath }/baiyang.png` },
      { title:'chunv', src:`${ imgPath }/chunv.png` },
      { title:'jingniu', src:`${ imgPath }/jingniu.png` },

      { title:'juxie', src:`${ imgPath }/juxie.png` },
      { title:'mojie', src:`${ imgPath }/mojie.png` },
      { title:'sheshou', src:`${ imgPath }/sheshou.png` },
      { title:'shizi', src:`${ imgPath }/shizi.png` },

      { title:'shuangyu', src:`${ imgPath }/shuangyu.png` },
      { title:'shuiping', src:`${ imgPath }/shuiping.png` },
      { title:'tianping', src:`${ imgPath }/tianping.png` },
      { title:'tianxie', src:`${ imgPath }/tianxie.png` },

    ];

    return(
      <Carrousel 
        width={ 750 } 
        perSideWidth={ 150 }
        perSideNum={ 3 }
        scale={ 0.8 }
        align="bottom"
        imageArr={ imageArr }
      />
    )
  }
```

## 配置参数

| 属性 | 说明 | 默认 |
| ---  | --- | --- |
| width | `Number` 组件宽度 | `600` |
| perSideWidth | `Number` 两侧按钮宽度 | `150` |
| perSideNum | `Number` 两侧显示图片数 | `2` |
| scale | `Number` 两侧图片缩放比 | `0.8` |
| gradient | `Boolean` 两侧图片透明度渐变 | `false` |
| align | `String` 两侧图片位置 `'top' || 'center' || 'bottom'` | `false` |
| autoPlay | `Boolean` 是否开启自动轮播 | `false` |
| autoDirect | `Boolean` 自动轮播方向 | `right` |
| autoPlayDelay | `Boolean` 自动轮播时间间隔 | `2` |
| imageArr | `Array` 图片数组`[{title:'',src:''}]` | `null` |
| ---  | --- | --- |
| onNextClick | `Function` 点击向右 回调 | `(img)=>{console.log(img);//返回中间图片信息对象}` |
| onPreClick | `Function` 点击向左 回调 | `(img)=>{console.log(img);//返回中间图片信息对象}` |
| onChange | `Function` 图片切换 回调 | `(img)=>{console.log(img);//返回中间图片信息对象}` |

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