Experimental Feature

⚠️ Unsupported ⚠️

This configurator requires a few CSS features that aren't present in your current browser.

To try this out, download Canary and visit chrome://flags/#enable-experimental-web-platform-features in a tab, enable it, and reload this page.

Carousel Configurator

A builder-like experience to help visualize the capabilities of a CSS only Carousel: buttons, markers, paging and inertness.


Spec · Gallery

<ul class="carousel">
  <li>…</li>
  <li>…</li>
  …
<ul>
Scroll Buttons
Dot Navigation
Auto Pages
Inert

Snap Scroller

.carousel {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  anchor-name: --carousel;

  > li {
    scroll-snap-align: center;
  }
}