轮播
一组幻灯片：左右箭头、圆点、键盘方向键、触屏滑动（基于 CSS 滚动吸附）；可自动播放。
带行为 核心包 1 个事件 1 个方法
示例
代码
<div data-zh-carousel data-autoplay="6000" aria-label="精选内容" style="max-width:28rem">
<div class="zh-carousel-track">
<div class="zh-carousel-slide" style="aspect-ratio:16/9;display:grid;place-items:center;background:var(--zh-color-primary-subtle)">第一张</div>
<div class="zh-carousel-slide" style="aspect-ratio:16/9;display:grid;place-items:center;background:var(--zh-bg-subtle)">第二张</div>
<div class="zh-carousel-slide" style="aspect-ratio:16/9;display:grid;place-items:center;background:var(--zh-info-bg)">第三张</div>
</div>
</div>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
data-zh-carousel | 容器 | 里面放 .zh-carousel-track，轨道里放多个 .zh-carousel-slide | 声明为轮播；箭头和圆点由库生成 |
data-autoplay | 容器 | 毫秒，如 5000 | 自动播放间隔；悬停、聚焦、页面不可见或系统开启“减少动态效果”时暂停 |
data-loop | 容器 | 在首尾循环，否则到头时箭头禁用 |
事件
| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
zh:carousel-change | 容器 | { index, slide } | 切换到另一张后触发 |
方法
ZhaoUI.carousel.go(el, index)：切换到第 index 张（从 0 开始）
样式类
zh-carousel zh-carousel-track zh-carousel-slide zh-carousel-arrow zh-carousel-dots zh-carousel-dot
无障碍
- 容器是 role="region"，带“轮播”说明，每张幻灯片是“第 n / 总数”
- 轨道可聚焦，左右方向键切换；箭头和圆点都是按钮，有 aria-label
- 自动播放在鼠标悬停或键盘聚焦时暂停，并让读屏朗读当前内容；可随时被用户中断
常见问题
轮播是什么？
一组幻灯片：左右箭头、圆点、键盘方向键、触屏滑动（基于 CSS 滚动吸附）；可自动播放。
怎么使用轮播？
先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写；需要用代码控制时，用「方法」里列出的接口。
轮播有哪些事件？
zh:carousel-change（切换到另一张后触发）。
轮播有哪些方法？
ZhaoUI.carousel.go(el, index)：切换到第 index 张（从 0 开始）。
轮播支持键盘和读屏吗？
容器是 role="region"，带“轮播”说明，每张幻灯片是“第 n / 总数”；轨道可聚焦，左右方向键切换；箭头和圆点都是按钮，有 aria-label；自动播放在鼠标悬停或键盘聚焦时暂停，并让读屏朗读当前内容；可随时被用户中断。
轮播需要依赖框架吗？
不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。