| CARVIEW |
Select Language
HTTP/2 302
content-type: text/plain; charset=utf-8
x-powered-by: Express
location: /carousel-configurator/
vary: Accept
x-cloud-trace-context: 18a6d88f247b98a0711f9d777d1f4b63
date: Sun, 28 Dec 2025 06:58:34 GMT
server: Google Frontend
content-length: 45
HTTP/2 200
content-type: text/html
vary: Accept-Encoding
x-powered-by: Express
cache-control: public, max-age=300
access-control-allow-origin: *
content-encoding: gzip
x-cloud-trace-context: 666382b1da3562d4711f9d777d1f4584
date: Sun, 28 Dec 2025 06:58:35 GMT
server: Google Frontend
content-length: 2702
CSS Carousel Configurator
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.
<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;
}
}