C34. Carousel

14 Jan 2022

Component finalised

@Japneet Kaur (Deactivated) @Steven Mao (Unlicensed)

BR-1

There is no limit set to how many slides can be housed in a module.

It is recommended that the module should house a minimum of 3 and a maximum of 5 slides to be displayed. Elements will update as the user navigates through the carousel.

BR-2

The following variations apply to the module, depending on where it's placed:

• Full-width container variation:

  • If placed in the above-main or below-main container, the module will take the full-width of the container

• Page-body container variation:

  • If placed in the main container, the module will take the full-width of the page-body container but will appear smaller in size as a whole in comparison to if the module were placed in a full-width container (i.e. above-main or below-main container)

BR-3

Will the slides auto-rotate across all devices?

By default, slides will not auto-rotate on Desktop or touch-devices.

BR-4

How can slides be toggled for display on touch-devices?

On touch-devices, slides can be toggled on the display through swiping in addition to interacting with the Navigation arrows.

BR-5

What is the expected behaviour/ functionality of the Navigation arrows?

Navigation arrows should allow for continuous navigation.

• If a user is on the last frame and the next navigation arrow is selected, then the frames will cycle to start with first frame

• If user is on the first frame and the back navigation arrow is selected, then the frames will go to the last frame within the sequence

BR-6

How can the image be authored across on Desktop and Mobile?

The content author can only add an image to the module - the image will be scaled to fit the module. It is recommended that the image added by content author has a 2:1 aspect ratio ideally with a minimum 1440px width for resolution on Desktop.

On mobile breakpoints, an optional mobile image can be authored which replaces the primary image at a defined mobile breakpoint. However, if no separate mobile image is chosen in the mobile image field, a resized version of the desktop image uploaded will be used instead for mobile.

1

Image

Image

N

N/A

Refer to BR-6 for details

2

Navigation arrows

Button

Y

On selection:

• If the next arrow is clicked, the next banner is displayed

• If back arrow is clicked,  the previous banner is displayed

Refer to BR-5 for details