Image Carousel

图片轮播

A swipeable row of images — product photos, promo banners — with dot indicators showing position.

All platformsMediaContent areaComponent

大白话说明

轮播把多张图叠进一个画框:手势或箭头切换,圆点或数字标位置。它的价值在省版面,代价在后面的图天生没人看——所以第一张必须放最重要的,后面的只配做补充。

什么时候用

商品多图、详情页图集、首页活动位(≤5 张)。

什么时候不用

核心信息拆在第 3、4 张图里等于没放;营销页 Hero 别用轮播讲三个卖点——一屏一个卖点才记得住。

细节与变体

  • 自动播放必须可暂停,且用户手动切过就停止自动
  • 数字指示(2/5)比圆点更耐多图(>5 张时圆点会溢出)
  • 图片比例必须统一,不齐的图用背景填充或裁切,别让画框高度跳来跳去

配套效果见下方「可用效果」。

Matching prompt (fill in & copy)

Effects you can apply

Reference implementations (open source)

  • GetWidget ↗ MIT · 免费(官网标注 MIT,未复核)

    A long-running Flutter component library with broad coverage and full docs.

  • Magic UI ↗ MIT · 免费(MIT)

    Animated components for React + Tailwind — marquees, glows, counters; a key reference ecosystem for this site's effects.