Carousel
Just a carousel.
The Carousel component allows horizontal scrolling through elements like images or teasers. It supports features such as snapping, centered alignment, looping, and keyboard navigation, making it ideal for compact, scrollable content displays.
Gallary
Film Strip
Teaser
The Items in this example are responsive. The visible items per slide are determined by the width of the screen.
Guidelines
Sliders should be used for content that is not easily consumed in a single view. They are ideal for displaying a large amount of content in a compact space.
Accessibility
When building a Slider, accessibility should not be an afterthought. Ensure that:
- Keyboard navigation is fully supported, allowing users to move between slides using arrow keys.
- Each slide or item is focusable if it contains interactive content.
- ARIA attributes are used to convey structure and behavior.
- Avoid auto-advancing slides unless it’s essential—and always provide a way to pause or control playback.