Brief: Carousel/Slider v. 0.1 [Block]

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  

*With the carousel being purely function

Visual Style 

X

Open

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

Open

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).

Note that buttons are missing off this (assuming touch-screen mode) DISCUSS pointer variations.

Performance

• Poorly executed carousels, particularly in the opening viewport can have a poor impact on Core Web Vitals. Please ensure that we are doing all possible to observe Carousel Best Practices for performance.

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 

There is some debate over accessibility best practices for carousels. Additionally, there is some research likely needed to be done to ensure compliance with the requirements of WCAG 2.1AA.

• WIP - note about whether to tab through all items or not and hide back/next from keyboard, but build in a skip button to bypass the carousel.

• WIP - note about not marking up with <li> markup if items are hidden and therefore the list count is inaccurate. Potentially have to replace with dynamic hidden text and a live region so that when encountering the list it would say “product list of 34 items, showing items X-Y, etc.

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

Useful links