Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Carousel

v.1.0.0 | Saturn
Healthy
StorybookFigma

Components

Play with the component with our playground.

Anatomy

Foo

NameDescription

1

Carousel
Required
width
Fluid (100% bounded by parent element) -
height
Fluid (content).

2

Left arrow
This arrow indicates there is a navigation.

3

Items
Required
It can be any element within a carousel. Number of items is variable.

4

Right arrow
This arrow indicates there is a navigation.

5

Page control
It shows the available items.

States

Default

  • A default state communicates an interactive component or element.

    • Desktop

    Hover

  • A hover state communicates when a user has placed a cursor above an interactive element.

    • Tablet and mobile

    Tap

  • A tap state communicates when a user has push an interactive element.

    • Desktop, tablet and mobile

    Pressed

  • A pressed state communicates a user tap.

    • Keyboard focus

  • A keyboard focus state communicates when a user has highlighted an element, using an input method such as a keyboard or voice. When focus is in one of the arrows, user can navigate with the return key.

    • Options

    Default

  • Number of items can change.

    • Single element carousel

  • It will show one item in each view.

    • Multiple elements carousel

  • The content can grow several lines vertically

    • Center mode

  • It can have the central element highlighted. It can be bigger to indicate that it is the selected one.

    • Variable height

  • Carousel can have different elements that help to understand better the item and the height will vary and chevrons will be center with the content.

    • Variable width (fill)

  • It can have different elements (1 to 3) with different width without activate the carusel. It can be align center or left.

    • Minimum number of items visibles in first level (left)

  • If the number of items are the same or less than the first level, the carousel is not displayed (arrows).

    • Minimum number of items visibles in first level (center)

  • If the number of items are the same or less than the first level, the carousel is not displayed (arrows).

    • Minimum case: Left aligned

  • If the screen (view) has a resolution big enought to let show all the carousel elements this is a minimum case, on the oppsosite side if pagination is shown means there're hidden elements and it's not a minimum case.

  • Same behavior will be applied when some of the elements have different width.

    • Minimum case: Center aligned

  • If the screen (view) has a resolution big enought to let show all the carousel elements this is a minimum case, on the oppsosite side if pagination is shown means there're hidden elements and it's not a minimum case.

  • Same behavior will be applied when some of the elements have different width.

    • Layout

    Number of elements in a view

  • It can change depending the space available.

    • Fully responsive

  • Carousel will scales with its parent container.

    • Multiple items. Main features

  • The items are distributed evenly within the container, always leaving a space between them of 8px.

    • Behaviours

    Carousel navigation

  • To navegate between items user can:

  • Horizontal scroll to move between items

  • With the navigation arrows

    • Carousel navigation by items

  • This option allows you to navigate by items. For example: at the first level we see 3 items from 1 to 3. If we click the right arrow and it shows us the items from 2 to 4. The page control changes position from the first to the second bullet.

    • Carousel navigation by views

  • This option allows you to navigate by views. For example: At the first level we see three items from 1 to 3. If we click the right arrow, it shows the items from 4 to 6. The page control changes position, from the first to the second.

    • Linear interaction

  • When user is in the first page, the left arrow will be disabled. When user is in the last page, the right arrow will be disabled.

    • Circular interaction

  • In circular carousel, both arrows will be active and after the las view, first page will be shown.

    • Keyboard interactions

    • Tap the arrow key on the keyboard

    This carousel is controlled by clicking the thumb, then using arrow keys to move it.

    Foo

    • Tap the tab key on the keyboard

    This carousel is controlled by using the tab key to select the thumb of the desired item of the carousel, then using arrow keys to move it.

    Foo

    Do's and dont's

    Foo

    Don’t

    Delete the arrows, in the linear navigation on the first page, it will be disabled.

    Foo

    Don’t

    Item height cannot be different.

    Foo

    Do’s

    In the center mode, selected item can have different style than the others.

    Foo

    Don’t

    Change page control dot color.

    Foo

    Do’s

    Number of elements will vary depending on the space available. In the circle picture it will occupy the space available without changing the items width always keeping a minimum of 8px padding between them.

    Foo

    Don’t

    Arrows will be shown only in one part of the carousel, integrated in the carousel or pageControl, never in both of them.

    CarouselUsage
    CarouselCode API