# 轮播

一组幻灯片：左右箭头、圆点、键盘方向键、触屏滑动（基于 CSS 滚动吸附）；可自动播放。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<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>
```

## 样式类

`zh-carousel`、`zh-carousel-track`、`zh-carousel-slide`、`zh-carousel-arrow`、`zh-carousel-dots`、`zh-carousel-dot`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `data-zh-carousel` | 容器 | 里面放 .zh-carousel-track，轨道里放多个 .zh-carousel-slide | 声明为轮播；箭头和圆点由库生成 |
| `data-autoplay` | 容器 | 毫秒，如 5000 | 自动播放间隔；悬停、聚焦、页面不可见或系统开启“减少动态效果”时暂停 |
| `data-loop` | 容器 |  | 在首尾循环，否则到头时箭头禁用 |

## 方法

- `ZhaoUI.carousel.go(el, index)`：切换到第 index 张（从 0 开始）

## 事件

| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
| `zh:carousel-change` | 容器 | { index, slide } | 切换到另一张后触发 |

## 无障碍

- 容器是 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。