Carousel

Open in Playground

Each child is a slide. Controlled via index + onIndexChange or uncontrolled via defaultIndex. autoPlay (ms) pauses on hover and focus; loop={false} stops at the ends. Arrow keys work while it has focus. The previous and next buttons are icon buttons with tooltips, centred on the slides; the dots below jump to a slide.

Kevin

Slides can be anything: here each one is an Image with a caption laid over it.

Banana grove at dawn
Banana grove at dawn

The wording of the buttons can be changed, for example to match what the slides are or to translate it: previousLabel, nextLabel and dotLabel(index). The first two are used for both the aria-label and the tooltip.

Banana order #1042

Props

  • childrenReactNode

    One child per slide.

  • indexnumber

    Current slide (controlled).

  • defaultIndexnumber
    Default: 0

    Initial slide (uncontrolled).

  • onIndexChange(index: number) => void

    Called when the slide changes.

  • autoPlaynumber
    Default: 0

    Auto-advance interval in ms (0 = off); pauses on hover and focus.

  • loopboolean
    Default: true

    Wrap around at the ends.

  • labelstring
    Default: 'Carousel'

    Accessible name.

  • previousLabelstring
    Default: 'Previous slide'

    Wording of the previous button (aria-label and tooltip).

  • nextLabelstring
    Default: 'Next slide'

    Wording of the next button (aria-label and tooltip).

  • dotLabel(index: number) => string
    Default: (i) => `Go to slide ${i + 1}`

    Aria-label of the dot for slide index (0-based).

  • classNamestring
    Default: ''

    Extra classes for the root element.