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 all tiers (XS, SM, and MD+), items are rendered next to each other and may overflow off-screen. Users can drag them to navigate. Additionally, previous/next buttons are always displayed to improve accessibility, allowing users to rotate the carousel by clicking.

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…