# @brainhubeu/react-carousel 中文文档 规范地址：https://npmcn.com/package/%40brainhubeu/react-carousel/ 版本：2\.0\.4 npm 元数据更新时间：2024-10-25T13:05:00.215Z 中文译文更新时间：2026-11-08T13:39:23.688Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40brainhubeu/react-carousel 原文对照：https://npmcn.com/package/%40brainhubeu/react-carousel/?lang=original 项目主页：https://github.com/brainhubeu/react-carousel#readme 源码仓库：https://github.com/brainhubeu/react-carousel ## 关键信息（来自 npm 元数据） - 包体积（解压后）：819 kB，9 个文件 - 模块格式：CommonJS - TypeScript 类型：未声明 - 运行依赖：0 个 - peer 依赖：react ^16\.8\.0，react-dom ^16\.8\.0 - 首次发布：2018-02-22T08:14:37.373Z - 最新版本发布：2021-05-26T09:55:45.193Z - 近 30 天下载量：44644（2026-10-09 至 2026-11-07，npm 官方下载统计） - 已发布版本数：390（近 12 个月 0 个） ## 中文简介 反应的木马组件 ## 安装 ```sh npm install @brainhubeu/react-carousel ``` 也可以使用：`pnpm add @brainhubeu/react-carousel`、`yarn add @brainhubeu/react-carousel`、`bun add @brainhubeu/react-carousel` ## README # [![](https://github.com/brainhubeu/react-carousel/raw/master/readme/assets/logo.gif)](https://brainhubeu.github.io/react-carousel/) 反应-胡萝卜 纯可扩展回放旋转木马,由 [脑壳](https://brainhub.eu/) (手艺家们) **[直播代码演示](https://brainhubeu.github.io/react-carousel/) | [v1 迁移指南](https://brainhubeu.github.io/react-carousel/docs/migrationGuide) | [雇我们](https://brainhub.eu/contact/)** [![CircleCI](https://circleci.com/gh/brainhubeu/react-carousel.svg?style=svg)](https://circleci.com/gh/brainhubeu/react-carousel) [![Last commit](https://img.shields.io/github/last-commit/brainhubeu/react-carousel.svg)](https://github.com/brainhubeu/react-carousel/commits/master) [![license](https://img.shields.io/npm/l/@brainhubeu/react-carousel.svg)](https://github.com/brainhubeu/react-carousel/blob/master/LICENSE.md) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com/) [![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/) [![Coveralls github](https://img.shields.io/coveralls/github/brainhubeu/react-carousel.svg)](https://coveralls.io/github/brainhubeu/react-carousel?branch=master) [![Downloads](https://img.shields.io/npm/dm/@brainhubeu/react-carousel?color=blue)](https://www.npmjs.com/package/@brainhubeu/react-carousel) [![Activity](https://img.shields.io/github/commit-activity/m/brainhubeu/react-carousel.svg)](https://github.com/brainhubeu/react-carousel/commits/master) [![Minified](https://img.shields.io/bundlephobia/min/@brainhubeu/react-carousel?label=minified)](https://www.npmjs.com/package/@brainhubeu/react-carousel) [![npm](https://img.shields.io/npm/v/@brainhubeu/react-carousel.svg)](https://www.npmjs.com/package/@brainhubeu/react-carousel) [![Contributors](https://img.shields.io/github/contributors/brainhubeu/react-carousel?color=blue)](https://github.com/brainhubeu/react-carousel/graphs/contributors) ## 目录 - 🔌 [安装](https://npmcn.com/package/%40brainhubeu/react-carousel/#readme-installation) - 🐥 [使用量](https://npmcn.com/package/%40brainhubeu/react-carousel/#readme-usage) - 🔨 [道具](https://npmcn.com/package/%40brainhubeu/react-carousel/#readme-props) - 🎠 [木马道具](https://npmcn.com/package/%40brainhubeu/react-carousel/#readme-carousel-props) - 🐾 [点道具](https://npmcn.com/package/%40brainhubeu/react-carousel/#readme-dots-props) - 😻 [捐款](https://npmcn.com/package/%40brainhubeu/react-carousel/#readme-contributing) - 💁 [建立地方发展](https://npmcn.com/package/%40brainhubeu/react-carousel/#readme-setting-up-local-development-which-means-running-the-docsdemo-locally) - 🐞 [测试](https://npmcn.com/package/%40brainhubeu/react-carousel/#readme-tests) - 🏋️‍ [工作流程](https://npmcn.com/package/%40brainhubeu/react-carousel/#readme-workflow) - 🏷 [标签](https://npmcn.com/package/%40brainhubeu/react-carousel/#readme-labels) - 📝 [决定日志](https://npmcn.com/package/%40brainhubeu/react-carousel/#readme-decision-log) ## 为什么? 有一些伟大的旋转木马(如浮出水面)没有真正的反应执行. 这个库为您提供旋转木马,它不仅仅是一些jQuery解决方案的包装,可以用作受控或不受控制的元素(类似于 [投入](https://reactjs.org/docs/uncontrolled-components.html)),并具有数以吨计的有用特征. ## 安装 ### 基础 ``` npm i @brainhubeu/react-carousel ``` ### 字体 ``` npm i @types/brainhubeu__react-carousel -D ``` ### 光盘N 如果你不使用 Webpack 这样的捆绑器, 你可以把这些脚本添加到您的 HTML 文件, `body` 节: ```html ``` 确保使用以 `-cdn`。 。 。 . 然后,可以使用下列全局变量: - `BrainhubeuReactCarousel` - `BrainhubeuReactCarouselDots` - `BrainhubeuReactCarouselItem` - `BrainhubeuReactCarouselWrapper` ### 安全部门改革 使用时 `@brainhubeu/react-carousel` 与SSR(服务员侧渲染),我们建议 [下一个.js](https://github.com/zeit/next.js) 作为 `@brainhubeu/react-carousel` 目前服务器方面不起作用,所以它必须被渲染到客户端(也许我们将来会提供服务器方面的工作). ```js import dynamic from 'next/dynamic'; const { default: Carousel, Dots } = dynamic( () => require('@brainhubeu/react-carousel'), { ssr: false }, ); ``` ## 使用量 默认情况下,该组件除了儿童外不需要任何东西来做简单的旋转木马. 记住,样式不必每次使用旋转木马时都要被导入,你可以在捆绑的入口处做一次. ```javascript import React from 'react'; import Carousel from '@brainhubeu/react-carousel'; import '@brainhubeu/react-carousel/lib/style.css'; const MyCarousel = () => ( ); export default MyCarousel; ``` [![gif](https://npmcn.com/package/%40brainhubeu/react-carousel/readme/assets/carousel.gif)](https://brainhubeu.github.io/react-carousel/docs/examples/simpleUsage) ### 显示点或缩略图 有单独的"点"组件可以用来完全控制导航点或添加缩略图. ```javascript import Carousel, { Dots } from '@brainhubeu/react-carousel'; import '@brainhubeu/react-carousel/lib/style.css'; import { useState } from 'react'; const MyCarouselWithDots = () => { const [value, setValue] = useState(0); const onChange = value => { setValue(value); } return (
... ), ... (), ]} />
); }; export default MyCarouselWithDots; ``` [![gif](https://npmcn.com/package/%40brainhubeu/react-carousel/readme/assets/thumbnails.gif)](https://brainhubeu.github.io/react-carousel/docs/examples/thumbnails) ## 道具 您可以访问可点击的演示,其中包含许多实例和一个 [活代码编辑器](https://brainhubeu.github.io/react-carousel/) 通过点击一个 profile 名称. ### 木马道具 | Prop | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | [**价值**](https://brainhubeu.github.io/react-carousel/docs/examples/controlled) | _数目_ | `undefined` | 当前幻灯片的索引( 0, 取决于元素顺序) | | [**变化**](https://brainhubeu.github.io/react-carousel/docs/examples/controlled) | _函数_ | `undefined` | 当当前幻灯片即将更改时( 如点击箭头或刷取) , 汉德勒 触发 | | **幻灯片** | _阵列_ | `undefined` | 通过幻灯片的替代方式。 此道具预计一系列 JSX 要素 | | **项目窗口** | _数目_ | `undefined` | 确定旋转木马中每张幻灯片的自定义宽度 | | **页:1** | _数目_ | `0` | 在项目间铺设 | | [**动画播放**](https://brainhubeu.github.io/react-carousel/docs/examples/animation) | _数目_ | `500` | 确定以毫秒为单位的过渡期 | | [**可拖动**](https://brainhubeu.github.io/react-carousel/docs/examples/draggable) | _布尔_ | `true` | 能够用鼠标光标拖曳到下一张幻灯片 | | [**断点**](https://brainhubeu.github.io/react-carousel/docs/examples/responsive) | _对象_ | `undefined` | 所有道具都可以设定为不同屏幕分辨率的不同值 | ### 插件 通过应用在旋转木马内部运出的插件或创建和应用自己的插件,可以扩展反应-木马默认行为 [**插件文档**](https://brainhubeu.github.io/react-carousel/docs/api/plugins) ### 点道具 | Prop | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | [**价值**](https://brainhubeu.github.io/react-carousel/docs/examples/dots) | _数目_ | 幻灯片中的幻灯片位置 | 当前 `Carousel` 价值 | | [**变化**](https://brainhubeu.github.io/react-carousel/docs/examples/dots) | _函数_ | `undefined` | `onChange` 调用(工作方式与 `onChange` 内 `Carousel` (单位:千美元) | | [**编号**](https://brainhubeu.github.io/react-carousel/docs/examples/dots) | _数目_ | 幻灯片数量 | 您想要控制的旋转木马中的幻灯片数 | | [**缩略图**](https://brainhubeu.github.io/react-carousel/docs/examples/thumbnails) | _反应元素阵列_ | `undefined` | 一组缩略图要显示 。 如果不提供, 将显示默认点 | | [**转**](https://brainhubeu.github.io/react-carousel/docs/examples/rtl) | _布尔_ | `false` | 显示点是否从右到左方向 | ### 建立地方发展机制,即在当地管理文件/文件: - `git clone https://github.com/brainhubeu/react-carousel` - `cd react-carousel` - `yarn` - `yarn start-demo` - http://localhost:8000 (英语) ### 测试 每个测试命令应从根目录运行. #### 单位测试 ``` yarn test:unit:coverage ``` #### E2E测试 ``` yarn test:e2e ``` ### 工作流程 见 [文档中的工作流程小节](https://brainhubeu.github.io/react-carousel/docs/contributions-guide/workflow) ### 标签 见 [文档中的标签分节](https://brainhubeu.github.io/react-carousel/docs/contributions-guide/labels) ### 决定日志 见 [我们的文件中的决定日志小节](https://brainhubeu.github.io/react-carousel/docs/contributions-guide/decision-log) ## 许可证 反应-木马是版权 2018-2020 [脑壳](https://brainhub.eu/?utm_source=github)它是自由软件,可按下列规定重新分配: [许可证](https://npmcn.com/package/%40brainhubeu/react-carousel/LICENSE.md)。 。 。 . ## 关于 反应-木马由Brainhub开发团队维护. 它由Brainhub资助,Brainhub的名称和标志是Brainhub Sp.z.o.o的商标. 您可以检查我们队友支持/开发的其他开源项目 [这里](https://github.com/brainhubeu)。 。 。 . [![Brainhub](https://brainhub.eu/brainhub.svg)](https://brainhub.eu/?utm_source=github) 我们喜欢开源JavaScript软件! 参见我们的其他项目或雇用我们用 JavaScript 构建您的下一个网页,桌面和移动应用程序. ## 常见问题 ### @brainhubeu/react-carousel 是什么？ 反应的木马组件 ### 如何安装 @brainhubeu/react-carousel？ 在项目目录运行 npm install @brainhubeu/react-carousel，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.8\.0）、react-dom（^16\.8\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @brainhubeu/react-carousel 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/brainhubeu\_\_react-carousel 是否存在。 ### @brainhubeu/react-carousel 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @brainhubeu/react-carousel 可以商用吗？ @brainhubeu/react-carousel 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @brainhubeu/react-carousel 的下载量有多少？ 根据 npm 官方下载统计，@brainhubeu/react-carousel 在 2026/10/09 – 2026/11/07 这 30 天内被下载 44,644 次，日均约 1,488 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @brainhubeu/react-carousel 还在维护吗？ 最新版本 2\.0\.4 发布于 2021/05/26（5 年前）；至今共发布 390 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/02/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。