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.