堆疊窺視輪播

當前卡片置中顯示，後方 2–3 張向上縮小偏移、露出可窺視的邊緣；拖曳或按鈕切換時前卡帶旋轉飛出、後卡以 spring 遞補上前，支援首尾循環與圓點指示，適合行程卡、商品卡等精選內容瀏覽。

載入預覽⋯

Playground

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

窺視層數peek

每層偏移 (px)offset

每層縮放遞減scaleStep

0.06

首尾循環loop

顯示圓點指示器showDots

顯示左右箭頭showArrows

<StackedPeekCarousel />

安裝

npx shadcn@latest add https://webberui.com/r/stacked-peek-carousel.json

或在 components.json 設定 registries 後，改用 @webberui/stacked-peek-carousel 安裝。

安裝依賴後，從 registry JSON（/r/stacked-peek-carousel.json 的 files[0].content）複製 stacked-peek-carousel.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

import { StackedPeekCarousel } from "@/components/ui/stacked-peek-carousel";

<StackedPeekCarousel
  items={[
    <TripCard key="kyoto" title="京都・嵐山" />,
    <TripCard key="swiss" title="瑞士・少女峰" />,
    <TripCard key="palau" title="帛琉・洛克群島" />,
  ]}
  peek={2}
  onIndexChange={(index) => console.log("目前在第", index + 1, "張")}
/>

每個 item 會鋪滿舞台區域（預設 h-72 w-64，可用 stageClassName 覆寫），建議卡片本身設定 h-full w-full 與圓角背景。

Props

Prop	型別	預設值	說明
`items`	`React.ReactNode[]`	—	輪播卡片內容清單，每個節點鋪滿舞台區域
`peek`	`number`	`2`	後方可窺視的堆疊層數
`offset`	`number`	`16`	每層堆疊向上偏移的距離（px）
`scaleStep`	`number`	`0.06`	每層堆疊縮小的比例（0–1）
`loop`	`boolean`	`true`	是否首尾循環
`showDots`	`boolean`	`true`	是否顯示圓點指示器
`showArrows`	`boolean`	`true`	是否顯示左右切換按鈕
`stageClassName`	`string`	—	舞台（卡片堆疊區）的尺寸樣式，預設 `h-72 w-64`
`onIndexChange`	`(index: number) => void`	—	目前索引變更時的回呼
`className`	`string`	—	透傳到最外層容器

可及性

舞台標記為 role="region" 搭配 aria-roledescription="carousel"，並在標籤中標示總張數
目前位置以 aria-live="polite" 區塊即時播報「第 X 張，共 N 張」
後方窺視卡片以 aria-hidden 對輔助科技隱藏，並以 pointer-events-none 停用互動
左右按鈕與圓點皆為原生 button，可鍵盤聚焦與操作，各自附上「上一張／下一張／跳至第 N 張」的 aria-label，當前圓點標記 aria-current
使用者系統開啟「減少動態效果」時停用拖曳手勢與彈簧動畫，切換改為即時完成

堆疊窺視輪播

Playground

安裝

使用

Props

可及性

On this page