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:
<carousel> <li><figure><img src="..."><figcaption>Item 1</figcaption></figure></li> <li><figure><img src="..."><figcaption>Item 2</figcaption></figure></li> ... </carousel>
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. The container can be styled, and even use independent flexboxes or grids or other layouts.
Standalone fragmentation demo
The elements within the carousel are all flowed into a common grid area using the
grid-flowproperty. This is also used to flow the scroll markers into the bottom grid area of the carousel.
Standalone grid-flow demo
::scroll-markerpseudo-class is used to create a marker which scrolls / tracks when the target element is scrolled into view.
Standalone scroll-marker demo
Scroll button pseudoclasses are used to automatically add buttons allowing scrolling in particular directions.
Standalone scroll-*-button demo