Carousel

Slide 1

Slide 2

Slide 3

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.

Implementations

The component Carousel is available in the following technologies:

Web Components

Parameters

Parameters

Make sure you have read about the parameters in here.

The parametrization of the component can be done with the following custom params or properties:

Name	Type	Slot	Description
config	string		Carousel configuration
overflow	boolean
no-loop	boolean
items	number		Number of items
delay	number		Delay between slides. Minimum value must be 1000ms
custom	object		A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as an JS object in stringified JSON format. Example: <z-carousel custom='{"fill":"#06e7a3"}' /> Check the available values in the customization section.
custom-str	string		The stringified version of the custom property. It follows the pattern key:value;key:value;, with the possibility of setting multiple values and spaces between the punctuation characters. Example: <z-carousel custom-str="fill:#06e7a3" />
z-theme	string		Sets the theme of the component. The possible values are light and dark. <z-carousel z-theme="dark" />

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	Width of the carousel
--z-carousel--height	distance	Height of the carousel
--z-carousel--gap	distance	...
--z-carousel--squint	distance
--z-carousel--bg	color	Background for for odd slides
--z-carousel--bg--even	color	Background for even slides
--z-carousel--button-bg	color	Arrow buttons color
--z-carousel--button-bg--hover	color	Arrow buttons hover color
--z-carousel--button-color	color	Arrow buttons color
--z-carousel--button-distance	distance	Distance for arrow buttons
--z-carousel--dot-bg	color	Background for the inactive dots
--z-carousel--dot-bg--hover	color	Background for inactive dots when hovered
--z-carousel--dot-bg--active	color	Background for the active dot
--z-carousel--dot-size	distance	Size of the dots
--z-carousel--dot-padding	distance	Padding of the dots

Accessibility

...

Related components