# rh-carousel

> vue3轮播图,vue3多张轮播图,多张图片一起轮播, carousel

Latest version **1.1.3** (published 2023-06-29) · 0 weekly downloads

## Install

```sh
npm install rh-carousel
pnpm add rh-carousel
yarn add rh-carousel
bun add rh-carousel
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2023-06-29 |
| First published | 2023-06-28 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | wuziyang |
| Keywords | vue3轮播图, 多张图片一起轮播, vue3, carousel |

## Links

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

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.47
- [rh-carousel](https://npm.io/package/rh-carousel.md) ^1.0.3

## 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

- 1.1.3 (latest) — 2023-06-29
- 1.0.3 — 2023-06-28
- 1.0.2 — 2023-06-28
- 1.0.1 — 2023-06-28
- 0.0.1 — 2023-06-28

## README

# Vue 3 + TypeScript + Vite

### vue3 的轮播图

支持 1 张，2 张，多张一起轮播
![alt 实例](./dome.png)

#### npm 安装

> npm install rh-carousel

#### pnpm 安装

> pnpm install rh-carousel

#### yarn 安装

> yarn add rh-carousel

```js
/** main.js */
import "rh-carousel/lib/style.css"; // main.js 引入样式
import { createApp } from "vue";
// 全局注册
import Carousel from "rh-carousel";
createApp(App).use(Carousel);
// -----
//局部引入
import { RCascader, RCarouselItem } from "rh-carousel";
```

```js
// 组件内使用
<RCascader :viewNum="3" width="1200px">
    <RCarouselItem>
      <div style="padding: 20px; height: 100%;">
        <div class="bg1">111</div>
      </div>
    </RCarouselItem>
    <RCarouselItem>
      <div style="padding: 20px; height: 100%;">
        <div class="bg2">2222</div>
      </div>
    </RCarouselItem>
    <RCarouselItem>
      <div style="padding: 20px; height: 100%;">
        <div class="bg3">3333</div>
      </div>
    </RCarouselItem>
    <RCarouselItem>
      <div style="padding: 20px; height: 100%;">
        <div class="bg4">4444</div>
      </div>
    </RCarouselItem>
    <RCarouselItem>
      <div style="padding: 20px; height: 100%;">
        <div class="bg5">5555</div>
      </div>
    </RCarouselItem>
    <template #left>111</template>
  </RCascader>
```

# RCascader Props（属性）

| 属性     | 说明           | 默认值 | 类型           |
| -------- | -------------- | ------ | -------------- |
| width    | 轮播图的宽度   | 500px  | String, Number |
| height   | 轮播图的高度度 | 300px  | String, Number |
| viewNum  | 可视数量       | 3      | Number         |
| interval | 自动轮播的时间 | 3000   | Number         |
| autoPlay | 是否自动轮播 | true   | Boolean         |

# RCascader Slots（插槽）

| 插槽     | 说明           |
| -------- | -------------- |
| default    | 轮播图的子项，必须是\<RCarouselItem\>   |
| left   | 左按钮 <template #left>icon\</template>| 
| right  | 右按钮 <template #right>icon\</template>      |

# RCarouselItem Props（属性）

轮播图子项

暂无属性
# RCarouselItem Slots（插槽）
| 插槽     | 说明           |
| -------- | -------------- |
| default    | 每一项的具体内容   |

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