Carousel

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

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

Demo

headless-ui の Carousel（role="region" aria-roledescription="carousel"）に pre-styled-ui の recipe CSS を適用した静的掲示です。3 スライド中 2 番目（index=1）を現在位置として固定表示しています。--fandhe-carousel-index CSS カスタムプロパティによる transform ベースのスライド位置表現で、JS 計測に依存しません。autoplay・ドラッグ操作は本イシューのスコープ外です。

Slide A

Slide B

Slide C

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）

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
indicator	data-current
item	data-current
root	data-orientation	horizontal

CSS Variables

Variable	Default
--fandhe-carousel-index	0
--fandhe-carousel-indicator-size	0.5rem
--fandhe-carousel-transition-duration	0.2s
--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）。