Carousel
走马灯：多张幻灯片轮流播放。支持 slide/fade 切换动画、autoPlay 自动播放（含 interval/hoverToPause）、dot/line/columnar 指示器（位置 left/center/right，尺寸 small/medium）、prev/next 箭头（always/hover）、自定义箭头 arrowProps、primary/light/dark 主题、受控 activeIndex 与 onChange。slide 通过 Snippet[] 传入。DOM 结构、tokens、动画逐项对齐 Semi。
如何引入
import { Carousel } from '@chenzy-design/svelte';基本用法
默认自动播放，幻灯片内可放任意内容（Typography 排版）
主题切换
theme 三种主题：primary / light / dark
主题
指示器
指示器类型（dot/line/columnar）、位置（left/center/right）、尺寸（small/medium）
类型
位置
尺寸
箭头
showArrow 控制箭头可见，arrowType 控制展示时机（always/hover）
展示箭头
展示时机
定制箭头
通过 arrowProps 定制箭头图标与点击事件
播放参数
autoPlay 传入 interval 控制间隔，hoverToPause 控制悬停暂停
动画效果与切换速度
animation='fade' 渐隐切换，speed 控制切换时长
受控的轮播图
activeIndex + onChange 受控，外部按钮跳转指定张
受控 activeIndex（当前：第 1 张）
API 参考
Carousel
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
slides | 每项一张幻灯片的 Snippet 数组（对齐 Semi children） | Snippet[] | [] |
activeIndex | 受控当前激活索引（不回写） | number | undefined |
defaultActiveIndex | 非受控初始索引 | number | 0 |
autoPlay | 自动播放；布尔或对象形式（interval 默认 2000ms，hoverToPause 默认 true） | boolean | { interval?: number; hoverToPause?: boolean } | true |
animation | 切换动画 | 'slide'|'fade' | 'slide' |
speed | 切换动画时长（ms） | number | 300 |
showIndicator | 是否展示指示器（每张一个） | boolean | true |
indicatorType | 指示器类型 | 'dot'|'line'|'columnar' | 'dot' |
indicatorPosition | 指示器位置 | 'left'|'center'|'right' | 'center' |
indicatorSize | 指示器尺寸 | 'small'|'medium' | 'small' |
showArrow | 是否展示左右箭头 | boolean | true |
arrowType | 箭头展示时机：always 始终 / hover 悬停显示 | 'always'|'hover' | 'always' |
arrowProps | 自定义箭头（props 透传 onClick/style，children 覆盖默认 Icon） | { leftArrow?: ArrowButton; rightArrow?: ArrowButton } | undefined |
theme | 指示器与箭头主题 | 'primary'|'light'|'dark' | 'light' |
slideDirection | slide 动画滑动方向 | 'left'|'right' | 'left' |
trigger | 指示器触发切换的交互方式 | 'click'|'hover' | 'click' |
onChange | 索引变更回调（对齐 Semi） | (index: number, preIndex: number) => void | undefined |
style | 根元素内联样式（常用于设定宽高） | string | undefined |
class | 根类名透传 | string | '' |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onChange | — | 当前索引变更（index, preIndex） |
Slots
| 名称 | 说明 |
|---|---|
slides | 幻灯片 Snippet 数组，每项一张 |
Methods
| 属性 | 类型 | 说明 |
|---|---|---|
play | — | 开始自动播放 |
stop | — | 停止自动播放 |
goTo | — | 切换到指定索引 |
prev | — | 切换到上一张 |
next | — | 切换到下一张 |
Accessibility
| ARIA role | region |
- 根 role=region aria-roledescription="carousel" aria-label（i18n）
- slide 区 aria-live=polite；autoPlay 实际播放中降级为 off
- 根 tabindex=0 承接键盘导航：←/→ 切换、Home/End 跳首末；RTL 下 ←/→ 镜像
- 每张 role=group aria-roledescription="slide" aria-label「第 N 张」，非可见张 aria-hidden + inert
- 指示器 role=tablist/tab，aria-selected，可 Enter/Space 触发
- 箭头 role=button aria-label 上一张/下一张，可键盘操作
- autoPlay 提供可见播放/暂停按钮（WCAG 2.2.2，aria-pressed），hover/键盘 focus 进入自动暂停
- reduced-motion 下切换动画归零且 autoPlay 不自启
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-carousel-animation-transition-delay | var(--cd-motion-duration-none) | Semi $transition_delay_carousel_*（背景/文字色过渡延迟 none） |
--cd-carousel-animation-transition-duration | var(--cd-motion-duration-none) | Semi $transition_duration_carousel_*（背景/文字色过渡时长 none） |
--cd-carousel-animation-transition-function | var(--cd-motion-ease-standard) | Semi $transition_function_carousel_*（背景/文字色过渡 easeOut） |