[go: up one dir, main page]

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;
  }
}