Carousel

Carousel is a component for displaying a group of content in a limited area of the interface. Most often used for gallery of images or cards.

Use carousel when:

• There is a group of content on the same level (for example, images or modals with data opened from table rows). In this case, the carousel saves the user's clicks.
• There is insufficient space in the interface, so carousel can save it.

Carousels are great for cases when multiple content items need to occupy the same space on a page. Note, that carousels on the homepages are typically ignored by users, don’t engage and frustrate users. Learn more in this funny explanation website about usage of a carousel component.

Use the carousel as an additional highlight of important website features and information, never as the only path to an important content.

1. Navigation buttons: Carousel.Prev, Carousel.Next.
2. Slides number indicator (optional): Carousel.Indicators.
3. Slide with content: Carousel.Item. Slide contains image, video or another type of information.
4. Container for items: Carousel.Container.

Component has default styles, but you can change them depending on your task.

Click-zone of the navigation buttons (Carousel.Prev, Carousel.Next) is stretched to the height of the content.

This example has the same styles as the example on the light background, except color for buttons that change slides – it should change to --icon-primary-invert.

Navigation buttons are always center aligned.

Default animation properties:

• Animation duration – 300.
• Animation easing function – ease-in-out.

When using a carousel, keep in mind that some users may only see the first frame or nothing at all. Therefore, it's important to intentionally place essential content on each frame. Consider using a static carousel or a single image instead of a rotating one.

If carousel images cycle automatically, provide a pause button to let users stop the movement.

Do not auto-play slides if:

• You are not sure you can get the timing right, so that most people read and understand the content within the time you specified. Sometimes carousels move too quickly, and users can’t read the information, which is frustrating for them. Sometimes carousels move too slowly, so when they do animate, it can be surprising to the user.
• Your content looks like an advertisement. Users are more likely to ignore an animated item that looks like an ad (if they are not in a shopping mindset)).

• Do not add auto-play on mobile devices, because: (1) it slows down the page, and (2) because pages are short, users often scroll quickly, so by the time the carousel changes, the user is likely looking below the fold and won’t see the change anyway.
• Test for the right timing, or at least estimate how long it might take the average user to read the text and process the images. Nielsen Norman Group recommends 1 second per 3 words for auto-rotating slides. Don’t stop at the last frame. Continue cycling through the frames (and displaying which frame is selected).
• Auto-play should pause on hover.
• Auto-play should permanently stop after any active user interaction.

Make sure users interested in the carousel understand that there is more to it than just the currently displayed image/content. Offer clear visual elements that represent the notion of more content, such as:

• navigation controls and icons (as noted above);
• cutting off, or “bleeding” an image and displaying part of the next image.