Carousel 轮播
在固定区域内按顺序浏览一组相关内容，并提供前后导航。
使用概览
适合使用
- 少量同类推荐、教程步骤或媒体内容需要逐项聚焦时。
不建议使用
- 关键信息必须同时可见，或用户需要快速比较所有项目时。
真实示例
产品亮点轮播
用本地化控件逐项浏览两个产品亮点。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/carousel.json基础用法
导入
import { Carousel } from "@richardqiu/quartz/carousel";JSX
<Carousel aria-label="产品亮点" slides={[{ id: "speed", content: "快速接入" }, { id: "theme", content: "主题可控" }]} previousLabel="上一项" nextLabel="下一项" slideLabel={(index, total) => `第 ${index + 1} 项，共 ${total} 项`} />状态与控制摘要
默认
键盘焦点可见
已禁用
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
slides | readonly CarouselSlide[] | 必填 | 提供具有稳定标识与展示内容的轮播项目。 |
loop | boolean | false | 决定到达末项后是否循环回到首项。 |
组合结构
- 01
Carousel
键盘约定
- 左右方向键移动一项，Home 与 End 移到边界，Tab 访问上一项和下一项操作。
可访问性契约
- 具名区域与当前项目暴露 carousel 和 slide 说明。
- 当前位置由使用方提供的项目标签播报。