Carousel 轮播图

/kar-uh-SEL/ · noun · 内容类模式 · #068

横向滑动浏览的内容条,露出下一张的一角作为邀请。位置圆点老实交代还有多深。

Carousel(轮播图) UI 模式示例:CatchUI 图鉴标本

你可能会这样叫它

  • “轮播图”
  • “首页滑动横幅”
  • “左右滑动的图片”
  • “可以横着划的卡片”
  • “底下带小圆点的图片”

……它的名字是 轮播图(Carousel)。

代码里叫什么

SwiftUITabView .tabViewStyle(.page)
UIKitUIPageViewController UIPageControl
Jetpack ComposeHorizontalPager HorizontalMultiBrowseCarousel
Android (Views)ViewPager2 CarouselLayoutManager
FlutterPageView CarouselView
Web (HTML / ARIA)scroll-snap-type aria-roledescription="carousel" 没有原生元素,通常是带滚动吸附的横向一行

复制给 AI 编程工具

加一个轮播(Carousel):一排可以左右滑动的内容,每次吸附到一张,并露出下一张的边缘作为提示。下方显示位置圆点,大屏上加上一张 / 下一张按钮。不要自动轮播——如果必须自动播放,鼠标悬停、获得焦点时要暂停,并提供可见的暂停按钮;每一张都要能用键盘访问,并播报为“第 2 张,共 5 张”。

用 AI 写界面时该怎么说:UI 用词指南(英文)→

相关模式

传一张截图,抓住这个模式 →

学会从视觉线索认出 UI 模式(英文)