# nw-carousel

> carousel

Latest version **2.6.1** (published 2021-01-12) · 0 weekly downloads

## Install

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

## 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.6.1 |
| Published | 2021-01-12 |
| First published | 2018-09-14 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 0 |
| Unpacked size | 12.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | juzhikan |
| Maintainers | azgaga, liushichuan, yaochen, shenyuan, aflyermin, ignous, jeekdong |

## Links

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

## Recent versions

- 2.6.1 (latest) — 2021-01-12
- 2.3.2 — 2020-12-17
- 2.3.1 — 2020-12-17
- 2.3.0 — 2020-12-17
- 2.2.3 — 2020-11-11
- 1.23.2 — 2019-01-28
- 1.23.1 — 2019-01-28
- 1.21.9 — 2018-10-19
- 1.21.8 — 2018-10-19
- 1.19.2 — 2018-09-18
- 1.19.1 — 2018-09-14

## README

# carousel

移动端网站首页几乎都会用到的图片轮播组件。
组件使用了 `touchstart` 和 touchend` 事件，所以仅适用于移动端

## 用法

直接引入dist 或者
使用 npm install carousel-html5 安装后import：
 ```js
 
 import Carousel from 'carousel-html5'

 var c = new Carousel({
    root: 'component-carousel',
    speed: 300, /* 可选参数，表示滑动速度，默认 300，单位 ms */
    interval: 3000, /* 可选参数，表示定时器间隔，不传则不开启定时器，单位 ms */
    current: 1, /* 当前滑块的位置，默认为0 */
    onSwitch: function (currentIndex) { /* 可选参数，切换回调，返回切换后index */
        console.log(currentIndex)
    } 
 })

 ```

要求 `#root` 是以下类似的三级结构：  

```html

<div id="component-carousel">
    <ul><!-- 不要求必须使用ul标签 -->
        <li><img src="xxx"></li><!-- 元素个数 >= 1, 1时不播放，2时自动补足成4个以便于切换 -->
        <li><img src="xxx"></li><!-- 不要求必须使用li标签 -->
        <li><img src="xxx"></li>
        <li><img src="xxx"></li>
        <li><img src="xxx"></li>
    </ul>
</div>
```

**具体可以查看：**
[DEMO](https://juzhikan.github.io/carousel/index.html)

**GITHUB:**
[juzhikan/carousel](https://github.com/juzhikan/carousel)

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