Carousel

轮播面板：淡入淡出或左右滑动切换，支持自动播放、指示器、箭头切换与悬停暂停。

最后更新 2026-10-25 19:27:08

说明

Items 传入 CarouselItem 列表（标题 + 描述 + 背景色 / 自定义内容）；Effect 取 fade（默认）或 slide 决定切换动画；AutoPlay + Interval 控制自动轮播节奏，鼠标悬停时自动暂停、移开后继续。ShowIndicators / ShowArrows 分别开关底部圆点与左右箭头；@bind-ActiveIndex 双向绑定当前索引，宿主可在外部控制切换。未给 Items 时用内置三色示例兜底，宿主零数据也能跑通全流程。

常见能力：

淡入淡出 / 左右滑动两种效果
自动播放 + 悬停暂停
底部圆点指示器
左右箭头切换
@bind-ActiveIndex 受控模式
内置示例兜底

用法

<Carousel Items="@items" Height="320px" Effect="fade" />

@* 受控模式：外部按钮切换 *@
<Carousel Items="@items" @bind-ActiveIndex="@current" AutoPlay="false" />

@* 滑动效果 + 自定义间隔 *@
<Carousel Items="@items" Effect="slide" Interval="4000" />

@* 没有数据：用内置示例兜底 *@
<Carousel Height="280px" />

API 参数

参数	类型	默认值	说明
`ActiveIndex`	`int`	`0`	当前激活项索引（可双向绑定）。
`ActiveIndexChanged`	`EventCallback<int>`	—	事件当前激活项变更回调。
`AutoPlay`	`bool`	`true`	是否自动播放。默认 true。
`Effect`	`string`	`"fade"`	切换效果：fade（淡入淡出）/ slide（左右滑动）。默认 fade。
`Height`	`string`	`"300px"`	容器高度（如 "400px"）。默认 "300px"。
`Interval`	`int`	`3000`	自动播放间隔（毫秒）。默认 3000。
`Items`	`List<CarouselItem>`	`null`	轮播项列表。为空时使用内置示例。
`OnChange`	`EventCallback<int>`	—	事件切换完成回调。
`ShowArrows`	`bool`	`true`	是否显示左右箭头。默认 true。
`ShowIndicators`	`bool`	`true`	是否显示指示器。默认 true。
`Visible`	`bool`	`true`	取得或设置组件是否可见，默认为false。
`VisibleChanged`	`EventCallback<bool>`	—	事件取得或设置组件可见性变化时的回调事件。
`Class`	`string`	`null`	取得或设置组件的CSS类名，用于自定义样式。
`Disabled`	`bool`	`false`	取得或设置组件是否禁用，默认为false。
`Style`	`string`	`null`	取得或设置组件的内联样式，用于自定义样式。

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。