Carousel/Slider overview v. 0.1

Component type	Carousel/Slider
Document status	DRAFT
Design source (in Figma)	List controls
Author	nathan.mckean@reckitt.com (Unlicensed)
Responsible	Julia Boyarshchikova (Deactivated)

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

DISCUSS Terminology (Carousel vs slider. One item per frame vs multi, slide animation vs other).

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

The content is critical to the context of the page (e.g. a product list of candles on the candles product list page. In this case, all should be visible (up to about lists of approximately 30 (where alternative methods of list expansion such as “load more” may be applied).
You have multiple homepage hero promotions. Carousels do not work in this context.

Carousels are a “list control” - effectively a way of taking long lists and reducing the space they consume. This can also be achieved with other list controls such as pagination and “load more” batching.

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.

*With the carousel being purely function

X

For a close demonstration of behaviour (albeit not in the same look and feel) see https://nickpiscitelli.github.io/Glider.js/ > Demos > Multiple items. Note though that the items in this demo are not focusable, so its not entirely a match.
Touch: For the closest demonstration of thisThe 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).
Keyboard: TBC - see Accessibility.
Mouse:
All: Lists do not loop and therefore back and next buttons will disable when the list is at the start and end.

Insert here