跳到主要内容
Termlib

UI 组件 · 数据展示

轮播图

Carousel

也叫：走马灯、幻灯片、Swiper、Slider、Banner 轮播

在同一块区域里轮流展示多张图片或卡片，可以自动切换，也可以左右滑动或点圆点切换。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

首页顶部做一个全宽轮播图，高 360px，共 4 张横幅，每 5 秒自动切换，鼠标悬停时暂停；左右两侧有半透明箭头按钮，底部居中有小圆点指示当前第几张，可点击跳转；手机上支持左右滑动，图片按比例裁切不变形。

发给

01判断

你的内容是这样吗？

对照两列，确认轮播图是不是你要找的。

符合这些情况，用轮播图

  • 首页顶部轮流展示几个同等级的活动或推广横幅
  • 商品详情页展示同一商品的多张图片
  • 空间有限，需要在一块区域里轮流放三到五张同类卡片

是这些情况，换成别的

  • 每张内容都很重要、希望用户全部看到时

    改用卡片网格

  • 内容是需要仔细阅读的长文字，自动切换会打断阅读

    改用卡片网格

  • 只有一张图时，直接展示就行

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    自动切换太快（两三秒一张），用户还没看完就被换走

  2. 02

    把最关键的行动按钮放在第三张幻灯片里

  3. 03

    每张图尺寸比例不同，切换时整个区域高度跳来跳去

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由可视窗口、横向排列的多张幻灯片、左右切换箭头和底部指示圆点组成。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一块大图区域，左右两侧各有一个箭头按钮
  2. 2底部有一排小圆点或短横线，其中一个高亮
  3. 3边缘可能露出下一张卡片的一部分

04解释

详细解释

轮播图把几张横幅或卡片叠在同一个位置，一次只露出一张，按时间自动切到下一张，或让用户点左右箭头、底部小圆点、手指滑动来切换。Element Plus 里叫走马灯（Carousel），很多项目直接用 Swiper 这个库实现。常见于首页顶部的活动横幅、商品详情页的多图展示、用户评价的横向滚动。

轮播的问题是：大多数用户只看第一张，后面几张曝光很低，自动切换还可能在用户阅读时突然换走内容。所以重要信息不要只放在第二、三张；如果几张内容都重要，改成 卡片网格 平铺更好。自动播放要在鼠标悬停时暂停，并给出明显的切换指示。

开发者信息
术语 ID
component-carousel
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • [aria-roledescription="carousel"]
  • .ant-carousel
  • .el-carousel
  • .arco-carousel
  • .t-swiper
  • .n-carousel
  • [data-slot="carousel"]
  • .carousel
  • .swiper
  • .slick-slider
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • carousel
  • swiper
  • slideshow
  • slides
  • image-slider
  • banner-slider
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Carousel
  • Swiper
  • Slideshow
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30