Carousel React-only
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.
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
visibleItemsprop. 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,buttonsPreviousPropsandbuttonsNextPropsprops
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.