This is an example of the carousel with pseudo-elements from the CSS Overflow Extensions Explainer referesented by full html elements. When you resize the carousel it automatically adjusts how many pages are needed to display all of the items.
Scroll markers are created for every image. These use a custom property to share the image, though with support for attr units could get the image from the attribute.
As the polyfill changes the DOM, you need to look at the original page source to see the original HTML and CSS the author writes. In short, the original HTML is a simple list of items:
<ul class="carousel"> <li><figure style="--src:url(...)"><figcaption>Item 1</figcaption></figure></li> <li><figure style="--src:url(...)"><figcaption>Item 2</figcaption></figure></li> ... </ul>
The .carousel element is styled as display: grid,
using the following set of CSS features
to achieve the overall layout and design.
This carousel makes use of polyfills of the following features:
The pages of the carousel are created automatically
at the point where the content overflows the container
through the use of column fragmentation.
The columns can be given a limited set of non-layout affecting styles.
In this demo, they are given a snap alignment and generate::scroll-marker pseudos.
The elements within the carousel are all flowed into a common grid area
using the grid-flow property.
This is also used to flow the scroll markers into the bottom grid area of the carousel.
The ::scroll-marker pseudo-class is used to create a marker
which scrolls / tracks when the target element is scrolled into view.
These are automatically placed within the ::scroll-marker-group pseudo
following the scroll container.
Scroll button pseudoclasses are used to automatically add buttons allowing scrolling in particular directions.