UI Component Lab 日本語

← All components

Disclosure

Carousel

Shows a set of slides one at a time, with buttons to move to the previous or next one.

Mountain hiking

Also known as

How to recognize it

A wide panel showing one image or card, with arrow buttons at the sides and small dots below that show which slide is visible.

Variations

Auto-rotating
Changes slides on a timer, with a stop/start button placed first inside the carousel.
Tabbed
The dots are tabs that jump to a specific slide and follow the Tabs keyboard pattern.

Behavior

  • The previous and next buttons switch slides; this demo wraps around from the last slide to the first.
  • Switching slides does not move focus off the button, and the new slide is announced through a live region.
  • If slides rotate automatically, there must be a button to stop rotation, and rotation stops while the carousel has focus or the mouse is over it.

Keyboard

KeyAction
TabMoves between the carousel buttons.
Enter / SpaceShows the previous or next slide, keeping focus on the button.

Usage notes

  • Do not autoplay. Let the user change slides.
  • Do not put information that everyone must read in it, and keep one topic per carousel.
  • Tabs: A carousel steps through slides in order with previous and next buttons; tabs let the user jump to any panel by its name.
  • Pagination: A carousel shows one slide of a small set in place; pagination moves through pages of a long list.

Sources