React 组件
UGCarousel 轮播
保留浏览器原生滚动与 Scroll Snap,同时补齐受控索引、按钮、指示器、键盘和读屏语义;默认不会自动播放。
导入方式
按需从包入口导入组件,并在应用入口引入一次样式文件。
tsx
import { UGCarousel, UGCarouselItem } from '@ug666/ui-react'内容轮播
聚焦轮播区域后可使用左右方向键、Home 和 End。
组件契约
React 与 Vue 同步
相同的索引、方向、对齐、循环和可访问控制。
原生行为
Scroll Snap 滚动吸附
触摸板、触屏和鼠标滚动仍使用浏览器原生滚动。
无障碍
键盘与读屏可用
方向键、Home、End、按钮和分页指示器都是真实操作。
当前:1 / 3
半宽内容
半宽项适合可继续浏览的卡片带,窄屏仍由组件内部横向滚动。
默认主题
极简主题
机甲主题
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value / defaultValue | number | 0 | 从 0 开始的受控或非受控页索引。 |
| orientation | horizontal | vertical | horizontal | 滚动主轴。 |
| align | start | center | end | start | 滚动吸附对齐位置。 |
| loop | boolean | false | 控制按钮是否首尾循环。 |
| controls / indicators | boolean | true | 显示内置按钮和分页指示器。 |
| UGCarouselItem.size | full | half | auto | full | 轮播项占用主轴比例。 |