'Carousel' component

Component type	Molecule
Component possible inclusions	n/a
Design source (in Figma)	n/a
Component status	https://rb-digital.atlassian.net/browse/DSD-157

Introduction

Carousels allow multiple pieces of content to occupy a single, defined space.

Anatomy

Key Content

Item	Type	Notes
List name	text	May be specified in the “list” component/content-type rather than the carousel itself as it would apply to other list controls such as “load more”.
List description	text	May be specified in the “list” component/content-type rather than the carousel itself as it would apply to other list controls such as “load more”.
List items	sub-component	Could include images, cards, videos, testimonials or more.
Button labels	text	“back/previous” and “next” should ideally be pulled centrally from a dictionary content type so that they aren’t needed to be inputted each time, but content editors can easily configure for language.

Visual Style

Controls

Lists are controlled by swipe/scroll gestures or “batch advanced” by buttons with progress being shown on the rail.

On narrower viewports where only one item is shown, it becomes necessary to increase affordance by previewing the next item in the list. (This may need a prop).

Behavior

Every time back or next is clicked, the number of visible items batches across. At the end of the list, the last item in the list takes the last visible position (there are no blanks spots at the end of rows. At the start of the list, the back control is disabled, at the end of the list, the next control is disabled. The list itself is independently scrollable with touch or with trackpad. If you manually scroll 2 items (so that 3-7 is shown) the next batching still moves 5 items and 8-12 is shown.
Touch: The user can scroll the list sideways by touch fluidly with items “snapping” into place when movement stops. Tapping the button controls will batch contents a “visible” frame at a time. If the list loads with [1][2][3] visible, tapping next will reveal [4][5][6]. If the list item had 8 items, tapping next again would show [6][7][8] and the next button would disable. Clicking the items within the carousel, if interactive would deliver the expected action for that item (e.g. link to xyz).
All: Lists do not loop and therefore back and next buttons will disable when the list is at the start and end.

Usage

Do’s

Use when you have a list of items and limited space in which to present them.
Use when your list items are not critical to the context of the page (e.g a list of cross-promoted products).

Don’ts

Don’t use when the content is critical to the context of the page (e.g. a product list of candles on the candles product list page).
Don’t use when you have multiple homepage hero promotions. Carousels do not work in this context.

Related/Similar Components

Pagination
Load more