頁面區塊 Sections
單張輪播評價卡
一張置中的大型評價卡自動輪播，底部進度條顯示下一則倒數，切換時內容滑動淡接，可暫停與手動切換。
一次只放一則評價、讓讀者把話讀完的頁面區塊。置中的大卡左側是人像區（漸層 + 抽象剪影佔位，可用 photoSrc 換真圖），右側依序是公司字標、引言、作者與可選的成效數字；卡片底部一條 2px 強調色進度條倒數到下一則。切換時內容依方向滑動淡接、人像交叉淡化，卡片高度隨引言長短平滑過渡。卡外有圓點指示、上一則／下一則與暫停鈕，滑過或聚焦卡片、切到別的分頁都會自動暫停，觸控裝置可左右滑動切換。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add autoplay-quote-cardPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
6000
450
編輯中的呼叫預設屬性
<AutoplayQuoteCard/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/autoplay-quote-card.json或在 components.json 設定 registries 後，改用 @webberui/autoplay-quote-card 安裝。
使用
import { AutoplayQuoteCard } from "@/components/ui/autoplay-quote-card";
<AutoplayQuoteCard
eyebrow="客戶怎麼說"
title="一次一則，讀得完整"
testimonials={[
{
quote: "活動頁從兩週縮到兩天上線，行銷自己就能完成。",
name: "林予晴",
role: "品牌經理",
company: "青嶼咖啡",
highlight: "從兩週縮到兩天",
metric: { value: "−86%", label: "上線等待時間" },
},
{
quote: "追蹤畫面好讀之後，客服電話明顯變少。",
name: "陳柏翰",
role: "營運主管",
company: "北辰物流",
rating: 5,
},
]}
interval={6000}
onIndexChange={(i) => console.log(`目前第 ${i + 1} 則`)}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
testimonials | AutoplayQuoteCardItem[] | — | 評價清單 |
eyebrow | string | — | 標題上方的小標 |
title | string | — | 區塊標題；同時作為輪播區的無障礙名稱 |
subtitle | string | — | 標題下方的說明文字 |
autoplay | boolean | true | 是否自動播放；減少動態效果時預設改為暫停，仍可按播放鈕啟動 |
interval | number | 6000 | 每則停留時間（毫秒）；未提供時讀取 --wb-autoplay-quote-card-interval |
duration | number | 450 | 切換動畫時間（毫秒）；未提供時讀取 --wb-autoplay-quote-card-duration |
index | number | — | 受控的目前索引 |
defaultIndex | number | 0 | 非受控模式的初始索引 |
onIndexChange | (index: number) => void | — | 索引變動時回呼 |
showMedia | boolean | true | 是否顯示左側人像區（md 以上） |
className | string | — | 透傳到根 section |
AutoplayQuoteCardItem
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
quote | string | — | 引言全文 |
name | string | — | 客戶姓名 |
role | string | — | 職稱 |
company | string | — | 公司名稱；未提供 companyMark 時以文字字標呈現 |
rating | number | — | 評分（0–5），提供時顯示星等 |
avatarHue | number | — | 人像佔位漸層的色相；未提供時依索引以黃金角度推算 |
highlight | string | — | 引言中要以強調色標記的片段（需與內文完全相符） |
metric | { value: string; label: string } | — | 可選的成效數字與標籤 |
photoSrc | string | — | 人像照片網址；未提供時顯示漸層 + 抽象剪影 |
companyMark | React.ReactNode | — | 公司字標（例如內嵌 SVG） |
細節
- 節奏變數：
--wb-autoplay-quote-card-interval（預設6000ms）與--wb-autoplay-quote-card-duration（預設450ms）；interval／durationprop 有提供時優先。強調色走--wb-autoplay-quote-card-accent（亮色預設#0d9488、深色#2dd4bf）。 - 進度條用 motion 動畫控制：暫停時
pause()停在原處，恢復時play()只播剩餘時間，不會從頭倒數。 - 暫停來源有四個：暫停鈕、滑鼠滑過、焦點在卡片內、分頁隱藏（
document.hidden），任一成立就暫停。 - 卡片高度以量測內容後的 motion 過渡處理，長短不一的引言切換時不會讓下方版面跳動。
- 頭像不需要照片：窄螢幕或
showMedia={false}時以姓名縮寫（中文取末兩字、拉丁取首字母）+ 確定性色相漸層呈現。
可及性
- 輪播容器為
role="region"、aria-roledescription="輪播"，以title為名稱；根section以aria-labelledby指向標題 - 引言以
figure／blockquote／figcaption呈現；圓點為按鈕，aria-label為「第 n 則」，目前那則帶aria-current；圓點群組內可用左右方向鍵切換 - 預設自動播放時一定有可見的暫停鈕（WCAG 2.2.2），帶
aria-pressed與文字「暫停自動播放」 - 播報區在自動播放期間
aria-live="off"，避免每幾秒打斷螢幕閱讀器；手動切換或暫停時改為polite - 使用者系統開啟「減少動態效果」時，自動播放預設關閉，滑動位移與縮放改為 150ms 淡入，仍可透過按鈕切換