Skip to content
Carousel
Carousels allow displaying a related set of content items in a limited space, by splitting the content into different frames. Users can navigate a carousel by interacting with the carousel arrows or dots pagination in larger viewports, or by a swipe gesture on tablet and mobile apps.
Stages, modals, articles collections and image galleries are all elements that can be displayed as carousels.
UX/UI Guidelines
Check the design documentation of the component in ZeroHeight.
From Figma to code
...
Customization
INFO
Check everything about the customization mechanics in the "How it works" documentation.
CSS Variable | Type | Description |
---|---|---|
--z-carousel--width | distance | ... |
--z-carousel--height | distance | ... |
--z-carousel--gap | distance | ... |
--z-carousel--squint | distance | |
--z-carousel--bg | color | ... |
--z-carousel--bg--even | color | ... |
--z-carousel--button-bg | color | ... |
--z-carousel--button-bg--hover | color | ... |
--z-carousel--button-color | color | ... |
--z-carousel--button-distance | distance | ... |
--z-carousel--dot-bg | color | ... |
--z-carousel--dot-bg--hover | color | ... |
--z-carousel--dot-bg--active | color | ... |
--z-carousel--dot-size | distance | ... |
--z-carousel--dot-padding | distance | ... |
Accessibility
...