<aside> <img src="/icons/list_purple.svg" alt="/icons/list_purple.svg" width="40px" />
By the end of this chapter, you will be able to…
scroll-snap-type and scroll-snap-align to create scroll-snapping behaviourscroll-behavior: smooth to animate navigation between scroll positions::scroll-button(), ::scroll-marker-group and ::scroll-marker
</aside>Carousel-type functionality (a ‘pannable’ track with hidden overflow that gets revealed on scroll) has traditionally been something that we’ve had to draw on JavaScript for.
JavaScript carousels can be quite intricate to develop on your own: some JavaScript is needed to calculate the dimensions of the elements (in order to offset them and track they are contained within accordingly), generate UI elements like position ‘indicators’ and use them to offer some form of ‘progress’ feedback (how far you are within the collection of items), cycle functionality (deciding if the elements should infinitely loop), handle mouse/gesture interaction (clicks on ‘pan’ arrows, click-and-drag gestures to move the carousel manually), auto-play (hold individual items in the carousel for fixed time intervals, before animating them)… the list goes on. 😴
It’s a simple and common UI design pattern, but somewhat complicated in execution and functionality.
<aside> <img src="/icons/light-bulb_blue.svg" alt="/icons/light-bulb_blue.svg" width="40px" />
The notion of simplicity through abstracted-away‡ complexity is apparent of a lot of UX planning and UI design: good UX and UI design is not the default.
A lot of effort often goes into making something feel effortless, simple and intuitive. That is the skill of a good interaction designer.
‡ “to hide, obscure, or mask the details of some process in order to simplify its functionality for the sake of usability.” (https://idioms.thefreedictionary.com/abstract+away)
</aside>
Some early popular carousel libraries were jQuery Cycle Lite, Slick slider, Owl Carousel — each was easy to setup but some of them have not been updated for a while (and might feel a little tired today). There are still quite a few good lightweight plugins out there, like:
… but looking at their documentation it can feel like a lot to process if you’re just trying to incorporate that UI design pattern.
As an exercise in this chapter, we’ll discuss the mechanics behinds the carousel, and aim to create one entirely with HTML/CSS, and progressively enhance what we make step-by-step. It’s not going to be a one-size-fits-all type solution, but it is intended to introduce a range of CSS concepts before we need to lean into JavaScript.
Here are the steps we’ll take:
Firstly, we’ll get a bunch of elements (eg. images) and arrange them in one dimension. These will overflow their parent container — the whole reason why carousels are used: to ‘contain’ content that exceeds available space, and reveal it as required. From here, we’ll do two things: clip (ie. hide) the overflow, and enable the element to scroll in the direction that it overflows. This will create a scrolling container that behaves like a rudimentary carousel.
For some UI polish, we’ll introduce scroll-snapping that will make moving through the content feel effortless. scroll-snap-type on the parent, scroll-snap-align on the children.
As a bonus extension we’ll create some clickable indicators that bring specific carousel items into view (as a means to introduce smooth scroll-behavior).