图片轮播

Image Carousel

一排图左右滑着看:商品图、活动 banner 都住这里,下面一排小圆点报位置。

全平台通用媒体内容区组件

大白话说明

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

什么时候用

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

什么时候不用

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

细节与变体

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

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

配套提示词(点开填空、复制)

可用效果

参考实现(开源)

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

    Flutter 老牌组件库,组件数量多、文档全,列表与卡片是强项。

  • Magic UI 动效组件 ↗ MIT · 免费(MIT)

    React + Tailwind 的动效组件集:跑马灯、光晕、数字滚动都有,本站效果库的重要参考生态。