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).
Use When
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)
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. 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.
Related/Similar Components
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.
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. |
*With the carousel being purely function
Visual Style
X
Behaviour
For a close demonstration of behaviour (albeit not in the same look and feel) see https://nickpiscitelli.github.io/Glider.js/ > Demos.
The Multiple items demo is a good example of batching. 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.
Single item is a good example of the single item carousel used in the product page header and also potentially used in future image, video, testimonial galleries etc.
Scroll lock support is a good example of locking items within view rather than allow a fully-free scroll. This ensures that items are in view.
Fractional slides is a good example of the scenario in some slider/carousel requirements where one item is shown, but for extra affordance, we show a fraction of the next item. The only difference is that in our design, the next item has a level of transparency.
Note that the underlying code base of these demos has not been inspiected and that in these demos the items within the carousel/slider are not individually focussable and ours will need to provide that support.
On https://www.glidejs.com/docs/options useful demos include…
Gap to control the distance between items (our spacing tokens)
There are a number of gesture controls such as swipteThreshold, dragThreshold and touchAngle which could be useful, but is likely a step too far.
animationDuration and animationTiingFunc are examples of controls for motion which will be powered by our motion tokens.
Direction is necessary to support ltr and rtl languages.
Peek is the same as the fractional slides demo above.
On https://www.embla-carousel.com/examples/navigation there are good demonstrations of…
Thumbnails as these will likely appear in product page headers in future, if not in MVP.
The Inspiration tab also demonstrates Progress to achieve a rail. What cannot be tested here though is whether the rail matches our intention for multi-item carousels. The rail should show the progress through the list, not the number of ‘frames’. As an example, if we have 18 items that are batched 5 at a time across (essentially 3.6 frames) when at load, because 5 items can be seen the rail will show 5/18 progress. What sometimes happens with other Reckitt sliders is that it rounds off to 4 frames and would show 1/4 in progress - this is not what we want. The rail is more of an non-interactive scrollbar than visual ‘dots’.
Lazy Load also demos another feature we require which is that slides loaded off screen are not loaded by default. We would expect that the next batch is loaded in advance, not not much more until needed.
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.
Editorial
X
X
X
Accessibility
X
X
X
Analytics & Data
X
X
Future Expansion
X
X
Wider Conversations that may impact this
Item: Description
Item: Description
Inspiration from elsewhere
X
X
Examples
Insert here