@dotconnor/grommet

## Carousel A carousel that cycles through children. Child components would typically be Images. It is the caller's responsibility to ensure that all children are the same size. [![](https://cdn-images-1.medium.com/fit/c/120/120/1*TD1P0HtIH9zF0UEH28zYtw.png)](https://storybook.grommet.io/?selectedKind=Media-Carousel&full=0&stories=1&panelRight=0) [![](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/carousel&module=%2Fsrc%2FCarousel.js) ## Usage ```javascript import { Carousel } from 'grommet'; <Carousel /> ``` ## Properties **a11yTitle** Custom label to be used by screen readers. When provided, an aria-label will be added to the element. ``` string ``` **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 ``` **gridArea** The name of the area to place this inside a parent Grid. ``` string ``` **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. ``` none xxsmall xsmall small medium large xlarge { bottom: xxsmall xsmall small medium large xlarge string, end: xxsmall xsmall small medium large xlarge string, horizontal: xxsmall xsmall small medium large xlarge string, left: xxsmall xsmall small medium large xlarge string, right: xxsmall xsmall small medium large xlarge string, start: xxsmall xsmall small medium large xlarge string, top: xxsmall xsmall small medium large xlarge string, vertical: xxsmall xsmall small medium large xlarge string } string ``` **fill** Whether to expand to fill all of the available width and height in the parent container. ``` boolean ``` **play** If specified, the number of milliseconds between automatically transitioning to the next child. It will loop through all children indefinitely. ``` number ``` **initialChild** If specified, the index of the first element to be shown. Defaults to 0. ``` number ``` **controls** Whether to show carousel controls and which type of controls. Defaults to `true`. ``` boolean arrows selectors ``` ## Intrinsic element ``` div ``` ## Theme **carousel.icons.next** The icon to use for the next image navigation control. Expects `element`. Defaults to ``` <Next /> ``` **carousel.animation.duration** The duration of the Carousel animation. Expects `number`. Defaults to ``` 1000 ``` **carousel.icons.previous** The icon to use for the previous image navigation control. Expects `element`. Defaults to ``` <Previous /> ``` **carousel.icons.current** The icon to use on the middle navigation control. One icon per carousel image. Expects `element`. Defaults to ``` <Next /> ``` **carousel.icons.color** The color used for Carousel icons. Expects `string | { 'dark': string, 'light': string }`. Defaults to ``` undefined ``` **carousel.disabled.icons.color** The color used for disabled Carousel icons. Expects `string | { 'dark': string, 'light': string }`. Defaults to ``` undefined ``` **global.colors.icon** The color of a given icon. Expects `string | { dark: string, light: string }`. Defaults to ``` { dark: #f8f8f8, light: #666666 } ``` **global.edgeSize** The possible sizes for margin. Expects `object`. Defaults to ``` { edgeSize: { none: '0px', hair: '1px', xxsmall: '3px', xsmall: '6px', small: '12px', medium: '24px', large: '48px', xlarge: '96px', responsiveBreakpoint: 'small', }, } ```