Carousel
carousel轮播 · 自研零依赖 scroll-snap + 箭头/圆点/autoplay/loop + 拖拽/键盘(reduced-motion)
用法
基础用法
每个顶层 child 是一张幻灯片；默认带箭头 + 圆点，可拖拽、支持 ←→ 键盘。
tsx
<Carousel className="w-96" aria-label="首页促销 Banner">
<Slide title="618 年中大促" />
<Slide title="夏季轻薄系列" />
{/* …更多促销位 */}
</Carousel>自动播放 + 循环
autoplay 每 4s 自动翻页，loop 让末张接回首张；悬停 / 聚焦时自动暂停。
tsx
<Carousel autoplay loop className="w-96">
<Slide title="618 年中大促" />
<Slide title="夏季轻薄系列" />
</Carousel>仅圆点
showArrows={false} 隐藏左右箭头，只保留底部圆点指示。
tsx
<Carousel showArrows={false} className="w-96">
<Slide title="618 年中大促" />
<Slide title="夏季轻薄系列" />
</Carousel>仅箭头
showDots={false} 隐藏圆点，只保留左右切换箭头。
tsx
<Carousel showDots={false} className="w-96">
<Slide title="618 年中大促" />
<Slide title="夏季轻薄系列" />
</Carousel>何时用
水平翻播一组等宽幻灯片——首页营销 Banner、图集、特性轮播。每个顶层 child 渲染为一张占满视口的卡片。静态多卡片栅格用 Card/List grid；本组件专攻"一次只看一张、可翻页/自动播放"的场景，自带 scroll-snap、拖拽、键盘与 reduced-motion 兼容。
导入
ts
import { Carousel } from "@hulianui/ui"Props
CarouselProps 继承原生 div 属性(omit onSelect/children)：
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| current | number | — | 受控当前索引(传入即受控) |
| defaultCurrent | number | 0 | 非受控初始索引 |
| autoplay | boolean | false | 自动播放(reduced-motion 下强制关闭) |
| autoplayInterval | number | 4000 | 自动播放间隔(毫秒) |
| loop | boolean | false | 循环：末尾再下一张回到首张 |
| showArrows | boolean | true | 显示左右切换箭头 |
| showDots | boolean | true | 显示圆点指示器 |
| aria-label | string | "轮播" | region 无障碍标签 |
| slideClassName | string | — | 每张幻灯片容器的额外类名(如固定高度/圆角) |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onSelect | (index: number) => void | 选中变化回调(箭头/圆点/键盘/autoplay/拖拽停靠均触发) |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children* | ReactNode | 幻灯片内容(每个顶层 child 一张) |
禁忌 / 坑
- 受控/非受控对称：传
current即受控(须配onSelect回写)，否则用defaultCurrent。 autoplay在prefers-reduced-motion下被强制关闭——无障碍/测试环境别依赖它自动翻页。- 每张幻灯片占满视口宽度，给幻灯片固定高度走
slideClassName而非内层 div，否则各张高度不一致会抖动。
相关
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<Carousel>
<Slide title="618 年中大促" />
<Slide title="夏季轻薄系列" />
{/* …更多促销位 */}
</Carousel>