Carousel

a carousel that cycles through children

Storybook

CodeSandbox

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"

"center"

"end"

"stretch"

controls

Whether to show carousel controls and which type of controls.

truefalse"arrows""selectors"

fill

Whether to expand to fill all of the available width and height in the parent container.

truefalse

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

initialChild

If specified, the index of the first element to be shown. Defaults to 0.

number

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"

"small"

"medium"

"large"

"xlarge"

{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

onChild

If specified, this function will be called with the active index when the currently active carousel changes.

"function"

play

If specified, the number of milliseconds between automatically transitioning to the next child. It will loop through all children indefinitely.

number

Theme

carousel.icons.next

The icon to use for the next image navigation control.

carousel.animation.duration

The duration of the Carousel animation.

carousel.icons.previous

The icon to use for the previous image navigation control.

carousel.icons.current

The icon to use on the middle navigation control. One icon per carousel image.

carousel.icons.color

The color used for Carousel icons.

string | { 'dark': string, 'light': string }

carousel.disabled.icons.color

The color used for disabled Carousel icons.

string | { 'dark': string, 'light': string }

global.colors.icon

The color of a given icon.

{
  "0": "#",
  "1": "6",
  "2": "6",
  "3": "6",
  "4": "6",
  "5": "6",
  "6": "6",
  "dark": "#f8f8f8",
  "light": "#666666"
}

global.edgeSize

The possible sizes for margin.

{
  "none": "0px",
  "hair": "1px",
  "xxsmall": "3px",
  "xsmall": "6px",
  "small": "12px",
  "medium": "24px",
  "large": "48px",
  "xlarge": "96px",
  "responsiveBreakpoint": "small"
}