Carousel 走馬燈

在固定區域輪播一組內容。使用 Element Plus 的 el-carousel。

設計準則

• 用於行銷位(banner、推薦位);重要功能與資訊不要放輪播——第二張之後幾乎沒人看
• 張數 3–5 張;要有指示點讓使用者知道總數與位置
• 自動輪播間隔至少 4 秒,滑鼠移入要暫停(EP 內建)
• 卡片式(type="card")用於同時露出前後項的推薦場景

基本用法

loading

指示點在容器外

內容是照片、文字看板這類不能被壓字的素材時,用 indicator-position="outside" 把指示點移到外面:

loading

⚠️ 指示點移到外面時要補一個 class

EP 的箭頭是 top: 50% + translateY(-50%),而 indicator-position="outside" 會把指示點算進容器總高, 箭頭因此比 banner 中線低 13px(指示點區塊高 26px 的一半)。 EP 沒有在根元素上給「水平 + 外部指示點」任何 class,所以無法全域自動修正, @accuhit/ui 提供一個工具 class,加上去即可:

<el-carousel class="carousel-indicator-outside" indicator-position="outside" height="180px">

卡片式

loading

Do / Don't

✅ Do	❌ Don't
行銷位、推薦位	重要公告只放在第三張
3–5 張 + 指示點	十張輪播沒人看得完
移入暫停	使用者在讀就被切走

給工程師

完整 API 見 Element Plus Carousel 文件。 本站規範優先於 EP 文件中的視覺建議。