Carousel example

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.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
    •

    The code

    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.

    Features

    This carousel makes use of polyfills of the following features:

    Stylable fragmentation

    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

    Flowing into grid areas

    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.

    Standalone grid-flow demo

    Scroll markers

    The 

    ::scroll-marker
    pseudo-class is used to create a marker which scrolls / tracks when the target element is scrolled into view.

    Standalone scroll-marker demo

    Scroll buttons

    Scroll button pseudoclasses are used to automatically add buttons allowing scrolling in particular directions.

    Standalone scroll-*-button demo