Carousel

スライド送り UI です。fandhe-frontend-headless-ui の carousel mod は Root / Control / PrevTrigger / NextTrigger / ItemGroup / Item / IndicatorGroup / Indicator の 8 anatomy パーツと、role="region"・aria-roledescription・自動生成の aria-label を提供します。Themes 版と異なりトランジション CSS やレイアウトを持たず、SSR での属性出力と決定的な状態機械のみを担います。

スタイル済みの表示例は Carousel を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Slide 1

Slide 2

Slide 3

Features

Root / Control / PrevTrigger / NextTrigger / ItemGroup / Item / IndicatorGroup / Indicator の 8 anatomy パーツを提供する（carousel.rs:1-10）。
root は role="region" + aria-roledescription="carousel" + 呼び出し側指定の aria-label を固定出力する（carousel.rs:85-106）。
item は role="group" + aria-roledescription="slide" + "{n} of {m}" 形式の aria-label を自動生成する（carousel.rs:167-186）。
autoplay 非対応の初期実装のため item_group の aria-live は常に "polite" 固定（carousel.rs:66-70,154-165）。
index==slide_count-1 かつ loop=true のとき Next は先頭へ循環し、prev/next とも disabled にならない決定的な遷移規則を持つ（carousel.rs:31-42）。

Anatomy

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

API Reference

Arguments

Name	Type	Default	Description
root: orientation	Orientation		carousel のレイアウト方向（carousel.rs:92-106）。
root: label	&str		aria-label に出力する説明文（carousel.rs:92-106、必須）。
prev_trigger/next_trigger: disabled	bool	false	端かつ loop=false のとき true（native disabled + data-disabled、carousel.rs:115-152）。
item: index, count, current	usize, usize, bool		スライド位置・総数・現在表示中かどうか（aria-label/data-current 生成元、carousel.rs:173-186）。
Carousel::new: index, slide_count, loop_, orientation	usize, usize, bool, Orientation		状態機械の初期値（carousel.rs:266）。

Data Attributes

Part	Attribute	Observed Values
indicator	data-current
item	data-current
root	data-orientation	horizontal

Examples

Vertical looping carousel

縦方向レイアウト・loop 有効で最終スライドを表示した例です（Demo は水平・非 loop）。

Slide 1

Slide 2

Slide 3

Accessibility

WAI-ARIA

Attribute	Description
role="region" / aria-roledescription="carousel" / aria-label	root に固定出力する（carousel.rs:85-106）。
role="group" / aria-roledescription="slide" / aria-label	item に固定出力し、aria-label は "{n} of {m}" 形式（carousel.rs:167-186）。
aria-live="polite"	item_group に固定出力する（carousel.rs:154-165）。
aria-label	prev_trigger/next_trigger/indicator に呼び出し側指定または自動生成の説明文を出力する（carousel.rs:115-208）。
aria-current="true"	indicator が current のときのみ出力する（carousel.rs:194-208）。