Vanilla Patterns

This is an example of a carousel—in particular, the image carousel. It's a typical pattern used when we want to present multiple items as a horizontal list where only a subset of items is shown at any given moment. This implementation is fully responsive and supports script-off (no JavaScript mode).

We use the loading="lazy" attribute on all image tags so that images that are not shown initially are not loaded immediately. The images also have a srcset attribute which is used to specify a WEBP format version, as well as a higher resolution version, and the src is only used as a fallback JPEG version in browsers that do not support WEBP (only IE and older versions of Safari, luckily).

Because the carousel supports script-off, the JavaScript marks the carousel as data-active when it kicks in. This changes the styling a bit, like hiding scrollbars and displaying a set of dot indicators for navigating the list using a mouse.