UI Component Lab English

← コンポーネント一覧

開閉・切替

Carousel カルーセル

複数のスライドを1枚ずつ表示し、ボタンで前後のスライドへ切り替える部品。

山歩き

別名

見分けるポイント

1枚の画像やカードを表示する横長の枠で、左右に矢印のボタン、下に今どのスライドかを示す小さな点が並ぶ。

バリエーション

自動再生
一定時間ごとにスライドが切り替わるもの。停止・再開のボタンをカルーセル内の最初に置く。
タブ付き
下の点がタブになっていて、特定のスライドへ直接移動できるもの。キー操作はタブと同じ。

挙動

  • 前後のボタンでスライドが切り替わる。このデモは最後のスライドから最初に戻る。
  • 切り替えてもフォーカスはボタンに残り、新しいスライドはライブリージョンで読み上げられる。
  • 自動で切り替わる場合は止めるボタンが必要で、フォーカスやマウスがカルーセル上にある間は切り替えを止める。

キーボード操作

キー動作
Tabカルーセルのボタン間を移動する。
Enter / Space前または次のスライドを表示する。フォーカスはボタンに残る。

使い分け・注意点

  • 自動で再生せず、利用者の操作で切り替える。
  • 必ず読んでほしい情報は載せず、1つのカルーセルには1つの話題だけを入れる。
  • タブ: カルーセルは前後のボタンで順に切り替え、タブは名前の付いたパネルへ直接切り替える。
  • ページネーション: カルーセルは少数のスライドをその場で1枚ずつ見せ、ページネーションは長い一覧のページを移動する。

出典