Carousel 跑马灯

Rue 的 Carousel 现在兼顾两类能力：一类使用 daisyUI 的滚动式视觉布局，保持多宽度、垂直、full-bleed 这些基础示例；另一类提供了成熟轮播组件常见的 arrows、dots、fade、dotPlacement 与方法控制。

Layout

使用 Rue 基础滚动感

`align`、`direction`、宽度类与 full-bleed 布局仍可直接复用。

Control

补充 dots / arrows / methods

支持 built-in arrows、dot placement、`apiRef` 方法与外部按钮编排。

Effects

Fade 与 progress dots

既能做内容轮播，也能做更偏产品展示或运营 banner 的切换样式。

# Snap 对齐总览

融合基础的 Snap to start / center / end 三个示例，使用 Rue 的滚动对齐视觉。

Start

Center

End

# 布局宽度总览

融合基础的 full width、half width 与 full-bleed 三个示例，用同一套 Carousel 结构呈现不同密度。

Full width items

Half width items

Full bleed

# 基础与垂直布局

展示基础水平居中、Vertical carousel 与垂直方向示例，但按使用意图重新排成一个 block。

基础（水平居中）

Vertical carousel

垂直方向

# 导航按钮与反向自动播放

把基础的 next/prev buttons 与 auto leftDemo 融合为更完整的 arrows 场景，同时使用 Rue 的大图视觉。

Carousel with next/prev buttonsarrows + dots

Carousel with next/prev buttons (auto left)backward autoplay

# Carousel with indicator buttons

展示 indicator buttons 场景，但切换改为稳定的 `apiRef.goTo`，按钮和 dots 会同步当前 slide。

# 受控切换 / API 方法

基础的“受控切换”示例在 Rue 设计页里改成方法编排：外部按钮控制轮播，组件通过 `onIndexChange` 回写当前索引。

当前索引：0

# 自动播放与进度 dots

展示自动播放循环示例，同时补一个进度型 progress dots 场景。

自动播放（循环）

Autoplay progress

# 效果与位置增强

支持 fade、top dots 和 end dots，在 Rue 的底色上覆盖常见轮播展示方式。

Fade

dotPlacement="top"

dotPlacement="end" + vertical

# Carousel 通过数据渲染（数组，组件内部）

展示 items 数组模式，并加上 arrows 与 dots，让它更接近真正的产品组件用法。

API

属性	说明	类型	默认值
`align`	控制 scrollx 模式下当前 slide 的对齐方式	`start` \| `center` \| `end`	`start`
`direction`	切换水平或垂直布局	`horizontal` \| `vertical`	`horizontal`
`effect`	切换滚动或淡入淡出效果	`scrollx` \| `fade`	`scrollx`
`arrows`	显示内置切换箭头	`boolean`	`false`
`dots`	显示分页 dots；对象形态支持附加 className	`boolean \| { className?: string }`	`false`
`dotPlacement`	控制 dots 在上、下、起始侧或结束侧的位置	`top` \| `bottom` \| `start` \| `end`	`bottom`
`auto / autoplay`	开启自动播放；`autoplay={{ dotDuration: true }}` 会显示进度 dots	`boolean \| { dotDuration?: boolean }`	`false`
`autoplaySpeed / interval`	控制自动播放节奏，保持 `interval` 写法	`number`	`3000`
`autoDirection`	控制自动播放方向	`forward` \| `backward`	`forward`
`activeIndex / initialSlide`	指定初始展示 slide；推荐外部联动时配合 `apiRef` 使用	`number`	`0`
`apiRef`	暴露 `goTo / next / prev / autoPlay / stop` 方法	`{ current?: CarouselRef }`	`-`
`items`	使用数组而不是 JSX children 直接生成 slide	`Array<{ content: any; className?: string }>`	`-`

Methods

方法	说明	签名
`goTo`	跳转到指定 slide，可选是否跳过动画	`(slide: number, dontAnimate?: boolean) => void`
`next`	切换到下一张	`() => void`
`prev`	切换到上一张	`() => void`
`autoPlay`	手动恢复自动播放，或传入 `leave` / `blur` 停止	(playType?: `update` \| `leave` \| `blur`) => void
`stop`	显式停止自动播放	`() => void`