Carousel

Overview

You can choose between 2 types of carousels, each offering a different functionality:

1. Default carousel
   Multiple slides are displayed at the same time to offer the user a view on different content.
2. Slider
   A single slide is displayed to offer to user a focus on one specific content.

For each type of carousel, you can choose the default navigation with the navigation arrows, which we recommend, or the navigation with the bullets :

More information about the navigation between sldies

---

States

Slides

The carousel itself has no state. Each slide can contain different components of the Design System and each of them will have its own states (buttons, links,...). If a slide contains a unique link, then it must be completely clickable with the hand visible at the hover.

Navigation arrows

The different color versions of navigation arrows can be used, please refer to the navigation arrows article for more information about the variants and states. To ensure the button affordance, a shadow is applied on all navigation arrows except for the disabled state.

Bullet list

Bullet list navigation is only available in the positive version of the default theme.

---

Anatomy

1. Slide container
   
2. Headings area (optional)
   This part contain the title and/or the subtitle of the slide.
3. Content area (optional)
   It contains the main content of your slide. You are free to compose your own content with the elements of the Design System.
4. Navigation arrows
   It allows the user to go to the previous and next slide. Anatomy details available in navigation arrows article.

---

Navigation between slides

You are able to navigate between slides by interacting with the navigation arrows, the bullets or by a swipe gesture.

Default carousel

In the default carousel, slides don't slide one by one but by visible block of slides.
If four slides are visible and three are hidden, a click on the navigation arrow will shift the four slides in order to show the next three (1, 2, 3, 4 -> 4, 5, 6, 7).

Navigation arrows can be used together or separated at your choice. The choice you make is then active in all breakpoints, it's not possible to choose one option on mobile and another on desktop.

Together

Navigation arrows are always placed together below the carousel's slides:

1. Mobile
   Below the carousel's slides centered on mobile.
2. Desktop
   Below the carousel's slides at the right on desktop.

Separated

Navigation arrows are always placed separately on each side of the carousel and in overlap with the slides. They are centered on the height of the slides.

1. Mobile
   
2. Desktop
   

Slider

1. Mobile
   Connected arrows navigations are placed overlapping on the slides and centered on mobile.
2. Desktop
   Navigation arrows are together by default on the slider at the bottom right on desktop..

Bullet list

Another way to navigate between slides is to use the navigation indicator. These are small lines just below the carousel. Each line represent a slide and you can click on a line to navigate to a slide.

All the bullets showing the active content: Mobile view (1) and desktop view (2).

---

Composition options

Default carousel

Default composition

Composition of carousel is set to the grid. By default, you can have a maximum of 4 slides fully visible at a time per row in desktop, the 5th is cut as preview.

And a maximum of 2 slides per row on mobile:

Fullwidth

The fullwidth option allows for up to 4 slides to be displayed simultaneously. It also provides a preview of the next slides by displaying them at a lower opacity outside of the grid. Users cannot interact with these slides even if they contain a link.

This option is only available for desktop, on mobile mode the composition goes back to default.

Slider

Default composition

The composition of the slider is set to the grid. On desktop, you can set the slider's width to the number of columns you need to follow your needs with a minimum of 3 columns.

On mobile, the slider always takes the full grid.

Outgrid

On desktop, the outgrid option allows you to set the slider's width to the number of columns you need. And have the background color or image extend out of the grid, to either bounds of the window.

On mobile, outgrid slider takes the fullwidth, like the fullwidth option here below.

Fullwidth

The fullwidth option allows you to set the slider's width to fullwidth on desktop and mobile.

---

Best practices

Height

The height of the slides is based on the highest slide of the row.

Full clickable

If your slide contains a single link, then it must be completely clickable with a pointer visible on hover.

Consistency

Use the same kind of components in each slide:

One slider or carousel at a time

Only one slider can be used in the same row.