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

<div class="carousel"> <div class="carousel__slide" data-label="Slide 1">…</div> <div class="carousel__slide" data-label="Slide 2">…</div> <div class="carousel__slide" data-label="Slide 3">…</div> … <div>
Scroll Buttons
Dot Navigation (markers)
Auto Pages
Inert
Force stop
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Base Carousel styles

.carousel { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; anchor-name: --carousel; > .carousel__slide { scroll-snap-align: center; } }