# @reuse-sh/carousel 中文文档

规范地址：https://npmcn.com/package/%40reuse-sh/carousel/

版本：0\.1\.0
npm 元数据更新时间：2026-11-02T07:14:22.421Z
中文译文更新时间：2026-11-02T08:09:38.292Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40reuse-sh/carousel
原文对照：https://npmcn.com/package/%40reuse-sh/carousel/?lang=original
项目主页：https://reuse.sh/carousel
源码仓库：https://github.com/reuse-sh/reuse

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：46.4 kB，8 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=19
- 首次发布：2026-11-01T16:46:43.074Z
- 最新版本发布：2026-11-02T07:14:22.119Z
- 已发布版本数：6（近 12 个月 6 个）

## 中文简介

基于本机滚动的旋转木马，具有鼠标拖动、分组、重复和自动播放功能。

## 安装

```sh
npm install @reuse-sh/carousel
```

也可以使用：`pnpm add @reuse-sh/carousel`、`yarn add @reuse-sh/carousel`、`bun add @reuse-sh/carousel`

## README

# @reuse-sh /旋转木马

一个旋转木马，保持原生触摸和触控板滚动与CSS快照。它增加了鼠标拖动、分组、RTL、同步轮播、可选的重复和自动播放。

## 原则

这些是代码遵守的规则。对任何框架的适应也会保留它们。

-   **让浏览器滚动。** 触摸板和触控板使用CSS滚动卡来滚动，代码的每一个移动也是一个滚动。
-   **永远不要让拖动点击。** 鼠标拖动或鼠标按下使移动条停止，永远不会打开它下面的链接。普通的点击仍然可以工作，触摸仍然是原生的。
-   **像触控板一样拖动。** 松开鼠标拖动会保持其速度，并滑动到最接近它要停止的幻灯片，而不会超过要求停止的幻灯片。过了任何一端，它都伸展并弹回来。
-   **重复，不要克隆。** 循环移动原始幻灯片，因此id、链接和按钮保持唯一，并且只有当幻灯片覆盖视口时才会打开。
-   **让自动播放等人。** 自动播放暂停悬停，聚焦，拖动，隐藏页面，屏幕外条带和减少运动。
-   **把钥匙放在本地。** 箭头键仅在聚焦条内起作用，并在从右到左的布局中交换两侧。
-   **把它移动的东西放回去。** Destroy取消计时器并恢复它添加的样式、转换和侦听器。

## 安装

```sh
npm install @reuse-sh/carousel
```

## 浏览器

```js
import { createCarousel } from "@reuse-sh/carousel";
import "@reuse-sh/carousel/styles.css";

const viewport = document.querySelector("[data-carousel]");
const carousel = createCarousel(viewport, {
  align: "center",
  loop: true,
});
nextButton.addEventListener("click", () => carousel.next());
carousel.subscribe((state) => {
  counter.textContent = String(state.index + 1);
});
```

## 反应

```tsx
import { useCarousel } from "@reuse-sh/carousel/react";
import "@reuse-sh/carousel/styles.css";

function Gallery({ children }) {
  const { ref, carousel } = useCarousel({ loop: true });
  return <>
    <div ref={ref} className="re-carousel">
      {children}
    </div>
    <button onClick={() => carousel?.next()}>Next</button>
  </>;
}
```

## 文档

-   示例和API： [https://reuse.sh/carousel](https://reuse.sh/carousel)
-   编码代理指南： [https://reuse.sh/carousel/guide.md](https://reuse.sh/carousel/guide.md)

## 许可证

麻省理工学院

## 常见问题

### @reuse-sh/carousel 是什么？

基于本机滚动的旋转木马，具有鼠标拖动、分组、重复和自动播放功能。

### 如何安装 @reuse-sh/carousel？

在项目目录运行 npm install @reuse-sh/carousel，或使用 pnpm add / yarn add / bun add。

### @reuse-sh/carousel 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @reuse-sh/carousel 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @reuse-sh/carousel 可以商用吗？

@reuse-sh/carousel 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @reuse-sh/carousel 还在维护吗？

最新版本 0\.1\.0 发布于 2026/11/02（1 天前）；至今共发布 6 个版本，其中过去 12 个月发布了 6 个；首次发布于 2026/11/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。