編號引言滑軌

把客戶評價做成一頁一則的輪播：左欄是超大的補零編號，切換時每一位數字各自沿垂直數字帶滾到新值——十位不變就不動，個位跟著切換方向往上或往下滾；下方是「02 / 05」分數與細進度軌，當前段的填色會滑到新位置。右欄是小型人像佔位方塊、引言、姓名與職稱，內容依方向從左或右滑入，也可以直接左右拖曳換頁。索引支援受控／非受控雙模式，可選擇循環與自動播放。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<NumberedQuoteSlider/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/numbered-quote-slider.json

使用

import { NumberedQuoteSlider } from "@/components/ui/numbered-quote-slider";

<NumberedQuoteSlider
  eyebrow="客戶怎麼說"
  title="用過的團隊，留下的一句話"
  testimonials={[
    {
      quote: "尖峰時段的出餐時間縮短了將近一半。",
      name: "林語晴",
      role: "營運主管",
      company: "青嶼咖啡",
      highlight: "縮短了將近一半",
    },
    {
      quote: "調度畫面一眼看得出哪台車卡住。",
      name: "陳柏宇",
      role: "調度組長",
      company: "北辰物流",
      rating: 5,
    },
  ]}
  onIndexChange={(i) => console.log(`切到第 ${i + 1} 則`)}
/>

Props

NumberedQuoteSliderItem

細節

• 逐位滾輪：每一位數字是一條 0–9 重複三次的垂直數字帶，平時停在中段。下一則一律往上滾、上一則一律往下滾，所以 09 → 10 的個位會往前滾一格到 0，而不是倒退九格；滾完再悄悄歸位到中段。
• 節奏變數：--wb-numbered-quote-slider-stiffness（預設 300，damping 固定 30）與 --wb-numbered-quote-slider-duration（預設 500ms）。可以在外層 CSS 直接覆寫，也可以用同名 prop 設定。
• 強調色只走 --wb-numbered-quote-slider-accent（淺色預設 #0d9488、深色預設 #2dd4bf），用於進度軌、星等、highlight 與焦點框。
• 拖曳右欄：放手時位移超過 80px 或速度超過 400px/s 就換頁，否則彈回原位；箭頭鈕在拖曳區外，不會誤觸。
• 自動播放在滑鼠停留、焦點在元件內、分頁隱藏或按下暫停鈕時暫停；loop 關閉時播到最後一則就停。

可及性

• 根元素是 <section>，有 title 時以 aria-labelledby 指向標題；輪播區為 role="region"、aria-roledescription="輪播"，可取得焦點
• 焦點在輪播區時，←／→ 方向鍵切換上一則／下一則；箭頭鈕為 type="button" 並帶「上一則」「下一則」aria-label，有 focus-visible 外框
• 大編號、分數與進度軌對輔助科技隱藏，改由 sr-only 的「第 2 則，共 5 則」以 aria-live="polite" 朗讀；自動播放進行中暫不朗讀，避免反覆打斷
• 每則引言以 <figure>、<blockquote>、<figcaption> 呈現；星等為 role="img" 並帶「評分 5 / 5」的標籤
• 自動播放預設關閉；開啟時一定有可見的暫停鈕（WCAG 2.2.2）
• 使用者系統開啟「減少動態效果」時：自動播放一律關閉、編號不滾動改為 150ms 淡入、引言不位移改為 150ms 淡入，進度軌直接跳到新位置；內容仍可用按鈕、方向鍵與拖曳切換