Carousel

fandhe-frontend-pre-styled-ui の carousel mod が提供するスタイル済み Carousel 部品です。

複数のコンテンツを 1 件ずつ切り替えて表示するナビゲーション部品です。orientation（Horizontal/Vertical）に応じて item-group の移動方向を切り替えます。選択・チェック状態を示す部品ではないため colorPalette 軸は提供しません。ページ送りには Pagination も参照してください。

--fandhe-carousel-item-basis（既定 100%）を root へ設定すると、複数スライドを同時表示できます（shadcn/ui との突合、イシュー #2028）。Demo では垂直方向の実演と、この CSS カスタムプロパティで 3 件同時表示にした実演もあわせて確認できます。

Demo

headless-ui の Carousel（role="region" aria-roledescription="carousel"）に pre-styled-ui の recipe CSS を適用した静的掲示です。3 スライド中 2 番目（index=1）を現在位置として固定表示しています。--fandhe-carousel-index CSS カスタムプロパティによる transform ベースのスライド位置表現で、JS 計測に依存しません。2 つ目は垂直方向（data-orientation="vertical"）の同型実演、3 つ目は --fandhe-carousel-item-basis（イシュー #2028、shadcn/ui の Sizes 例に相当）による複数スライド同時表示の実演です。shadcn/ui の Thumbnails 例に相当する構成は参照ページに存在しないため対象外です。autoplay・ドラッグ操作は本イシューのスコープ外です。

Slide A

Slide B

Slide C

Slide A

Slide B

Slide C

Slide A

Slide B

Slide C

Slide D

Slide E

Features

orientation（Horizontal/Vertical）に応じて item-group の transform 軸を translateX/translateY に切り替える（crates/pre-styled-ui/src/carousel.rs:390-398）
label 引数を root の aria-label へそのまま出力する（carousel.rs:277-318, 321-322）
選択・チェック状態を示す部品ではないため colorPalette 軸を提供しない（carousel.rs テスト carousel_stylesheet_never_consumes_color_palette_axis）
--fandhe-carousel-item-basis（既定 100%）を root へ設定すると item の flex-basis と item-group の横方向 transform 係数の両方に反映され、複数スライドの同時表示に対応する（イシュー #2028、shadcn/ui の Sizes 例に相当。carousel.rs の recipe() item/item-group base）

Anatomy

root
  control
    prev-trigger
    item-group
      item
    next-trigger
  indicator-group
    indicator

API Reference

Arguments

Name	Type	Default	Description
`orientation`	`Orientation`	`Horizontal`	スクロール方向（carousel.rs:277-318）。
`label`	`&str`	(必須)	root の aria-label に渡すラベル（carousel.rs:277-318, 321-322）。

Data Attributes

Part	Attribute	Observed Values
`control`	`data-orientation`	`horizontal`, `vertical`
`indicator`	`data-current`	（値なし）
`indicator`	`data-index`	`0`, `1`, `2`, `3`, `4`
`indicator`	`data-orientation`	`horizontal`, `vertical`
`indicator-group`	`data-orientation`	`horizontal`, `vertical`
`item`	`data-current`	（値なし）
`item`	`data-index`	`0`, `1`, `2`, `3`, `4`
`item`	`data-inview`	（値なし）
`item`	`data-orientation`	`horizontal`, `vertical`
`item-group`	`data-orientation`	`horizontal`, `vertical`
`next-trigger`	`data-orientation`	`horizontal`, `vertical`
`prev-trigger`	`data-disabled`	（値なし）
`prev-trigger`	`data-orientation`	`horizontal`, `vertical`
`root`	`data-orientation`	`horizontal`, `vertical`

CSS Variables

Variable	Default
`--fandhe-carousel-height`	`20rem`
`--fandhe-carousel-index`	`0`
`--fandhe-carousel-indicator-size`	`0.5rem`
`--fandhe-carousel-item-basis`	`100%`
`--fandhe-carousel-transition-duration`	`var(--fandhe-motion-duration-normal, 200ms)`
`--fandhe-carousel-trigger-size`	`2.5rem`

Examples

Root only

aria-label="Products" を持つ Carousel root の最小構成例です。

Accessibility

WAI-ARIA

Attribute	Description
aria-label（root、呼び出し側必須引数）	root へそのまま出力される（carousel.rs:277-318, 321-322）。