| Page Properties | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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).
...
*With the carousel being purely function
Visual Style
X
...
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
...
X
...
X
...
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
...