COMPONENT 64 · Content & Media

轮播

Carousel

也叫SliderSlideshowPager轮播图UIPageViewController

在有限视口内一次展示一个或少量内容，并前后切换。

Shows one or a few items in a constrained viewport with previous and next navigation.

ANATOMY & USAGE

结构与使用建议

组成部分

幻灯片视口
前后按钮
位置指示器

适合使用

一组同类媒体适合按顺序轻量浏览时。

不建议使用

每项都很重要、需要比较，或自动轮播会隐藏内容时。

键盘与无障碍

提供暂停、前后和位置说明；键盘焦点不应被换页打断，并尊重减少动态偏好。

DESCRIBE IT TO AI

这样告诉编程助手

实现轮播（Carousel）：在有限视口内一次展示一个或少量内容，并前后切换。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<section class="demo stack" aria-roledescription="轮播" aria-label="产品亮点">
  <p id="slide" aria-live="polite">第 1 张：快速搜索</p>
  <div class="row">
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
  </div>
</section>