Carousel React-only

Open in Storybook

Carousel optimizes screen space by displaying only a subset from a collection of items in a scrolling view. The navigational controls on a carousel suggest additional content that is not currently visible.

HINT A carousel brings with it some inherent UX drawbacks – keep in mind that users generally don’t interact with items that start off-screen in a carousel.

Loading demo…

Rules For Developers

Each child of the Carousel component is turned into an item in the layout
To set the number of items that are visible together use the visibleItems prop. This affects only MD+

Controls

On XS and SM tiers, the items are rendered next to each other and overflow out of the screen. The users can drag them. In MD+ only a few items are visible and previous/next buttons are displayed. Users can click on these to rotate the Carousel.

Rules For Developers

You can alter the controls with buttonsColor, buttonsPreviousProps and buttonsNextProps props

Stepper

The stepper is a non-interactive progress indicator highlighting the current step. It should be used only on MD+ as smaller tiers don’t distinguish a current step.

Loading demo…