Carousel
Carousel is a content slider featuring various customization options.
Composition-based carousel using native scroll-snap with sub-components for root, content, items, navigation, and indicators.
Usage #
Examples #
Basic #
Composition-based carousel using native scroll-snap with sub-components for root, content, items, navigation, and indicators.
Alignment #
Use align to control snap alignment and slidesPerPage to show partial slides.
Loop #
Enable continuous looping with the loop property. Use slidesPerPage to show partial slides.
Orientation #
Set orientation to vertical for a vertical carousel layout.
Variable Size #
Enable autoSize to allow items with variable widths.
Gallery #
Two carousels synchronized via slide input to create a gallery with thumbnail navigation.
Accessibility #
Screen Reader
Carousel uses region role and since any attribute is passed to the main container element, attributes such as aria-label and aria-roledescription can be used as well. The slides container has aria-live attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay.
A slide has a group role with an aria-label that refers to the aria.slideNumber property of the locale API. Similarly aria.slide is used as the aria-roledescription of the item. Inactive slides are hidden from the readers with aria-hidden.
Next and Previous navigators are button elements with aria-label attributes referring to the aria.nextPageLabel and aria.firstPageLabel properties of the locale API by default respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using nextButtonProps and prevButtonProps.
Quick navigation elements are button elements with an aria-label attribute referring to the aria.pageLabel of the locale API. Current page is marked with aria-current.
Next/Prev Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus through interactive elements in the carousel. |
| enter | Activates navigation. |
| space | Activates navigation. |
Quick Navigation Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus through the active slide link. |
| enter | Activates the focused slide link. |
| space | Activates the focused slide link. |
| right arrow | Moves focus to the next slide link. |
| left arrow | Moves focus to the previous slide link. |
| home | Moves focus to the first slide link. |
| end | Moves focus to the last slide link. |
