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. The number of scroll markers also dynamically changes with the number of pages.
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><img src="..."><figcaption>Item 1</figcaption></figure></li> <li><figure><img src="..."><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.