React 组件

UGCarousel 轮播

保留浏览器原生滚动与 Scroll Snap,同时补齐受控索引、按钮、指示器、键盘和读屏语义;默认不会自动播放。

导入方式

按需从包入口导入组件,并在应用入口引入一次样式文件。

tsx
import { UGCarousel, UGCarouselItem } from '@ug666/ui-react'

内容轮播

聚焦轮播区域后可使用左右方向键、Home 和 End。

组件契约

React 与 Vue 同步

相同的索引、方向、对齐、循环和可访问控制。

原生行为

Scroll Snap 滚动吸附

触摸板、触屏和鼠标滚动仍使用浏览器原生滚动。

无障碍

键盘与读屏可用

方向键、Home、End、按钮和分页指示器都是真实操作。

当前:1 / 3

半宽内容

半宽项适合可继续浏览的卡片带,窄屏仍由组件内部横向滚动。

默认主题
极简主题
机甲主题

属性

属性类型默认值说明
value / defaultValuenumber0从 0 开始的受控或非受控页索引。
orientationhorizontal | verticalhorizontal滚动主轴。
alignstart | center | endstart滚动吸附对齐位置。
loopbooleanfalse控制按钮是否首尾循环。
controls / indicatorsbooleantrue显示内置按钮和分页指示器。
UGCarouselItem.sizefull | half | autofull轮播项占用主轴比例。