Return to Sky UI homepage

Carousel - Usage

View on FigmaView on GitHub

Basic Guidelines

The Pagination is set up as a compulsory element to give the user control and help with orientation. It is limited to six slides as per best practice.

Set up in Figma

The layers “REPLACE-Small” and “REPLACE-Large” within the Info Area of the Carousel are set up as composable components. They can be replaced by a locally created component.

There is no need to include a padding or a background fill in your own locally created component, as this is handled by the Info Area. The scrim will also still be available.

To learn more about how composable components are used in Figma, please have a look at the Designer Quickstart.

Behaviour

The Carousel slides can be navigated with the Navigation Buttons, the Pagination or via swiping left/right.

  • The Carousel is infinite. After the last image, the animation continues with the first image.
  • Navigating to the opposite direction will reverse the animation direction and show the previous image.

Media Controls

Media controls are set to autoplay and mute by default. The settings are global — next and previous slides inherit the media settings from the main content.

Content Guidance

Character Limits

  • Text: Limited to two lines of text, as only the bottom two lines of text are accessible with the scrim gradient.
  • CTA: Limited to 19 characters for a Text Link, and 14 characters for a Button.

Slide descriptions

Make sure to include suitable descriptions for all slides of the carousel. Avoid having any text as part of an image. If this is not possible, make sure the alt text reflects the exact content on the image.

Alignment

A Carousel using Peeks needs to span the whole width of the viewport. The example below is downscaled proportionally for illustration purposes.

A Carousel without Peeks can be scaled down and centre aligned. The example below is downscaled proportionally for illustration purposes.

Adjustable Elements

Scrim within the Peeks

In Figma, it is not possible to show the Scrim without the peeks. This is different in React. If the Carousel doesn’t span the whole viewport, the scrims are used to enable a smooth transition between slides. This is not necessary in Figma as the component is not set up to be animated, but used statically only.

The example below illustrates a carousel mid-transition, using a white scrim to let slides fade in and out.

Colour Usage

Trim

The Sky Spectrum is set as the default Trim, but it can be changed to any product or channel gradient, or can be turned off entirely. It’s possible to set a trim for the carousel as a whole, or do them individually slide by slide.

Image Sizing

The default aspect ratio for the main image and the peeks are set to 16:9 landscape on Desktop and Max Width, and portrait for Mobile and Tablet.

The image placeholder can be changed to any other available aspect ratio. However, all images/videos within the carousel must use the same aspect ratio.

Notes on Accessibility

Carousels are known for being difficult to use with assistive technology. Even though this Carousel was tested meticulously in terms of accessibility, it’s challenging to make carousels usable for everyone. Consider if a carousel is the best method for displaying your content to the user. A stand-alone hero image/video loop with a static CTA, or a row of Signposts might be better alternatives that are easier to comprehend and navigate.

Keyboard interaction

When navigating the content via a keyboard using the Tab key, the interactive elements of the Carousel will be selected in the following order:
  1. Media controls (Play, Unmute)
  2. Pagination (previous, next)
  3. Navigation (previous, next)
  4. CTA within Info Area
Screen reader interaction

When using a screen reader to explore the content, the elements of the Carousel will be read out in the following way:
  1. Announcing the Carousel
  2. Media controls, option to turn off auto play and unmute videos
  3. Slide number, total number of slides and title of current slide
  4. Slide number, total number of slides and title of previous slide
  5. Slide number, total number of slides and title of next slide
  6. Content of current slide (image alt text and text within the Info Area)

Other slides will only be read out, if the user navigates to them.