Data display and layout
Carousel
A scroll snap slider with centered, full width and vertical modes, plus dot and arrow links to slide ids.
Example
<div class="max-w-xl"><div class="carousel carousel-full"><div id="slide-1" class="carousel-item"><div class="aspect-video w-full bg-gradient-to-br from-primary to-accent"></div><a class="carousel-prev" href="#slide-3" aria-label="Previous slide"></a><a class="carousel-next" href="#slide-2" aria-label="Next slide"></a></div><div id="slide-2" class="carousel-item"><div class="aspect-video w-full bg-gradient-to-br from-info to-success"></div><a class="carousel-prev" href="#slide-1" aria-label="Previous slide"></a><a class="carousel-next" href="#slide-3" aria-label="Next slide"></a></div><div id="slide-3" class="carousel-item"><div class="aspect-video w-full bg-gradient-to-br from-warning to-danger"></div><a class="carousel-prev" href="#slide-2" aria-label="Previous slide"></a><a class="carousel-next" href="#slide-1" aria-label="Next slide"></a></div></div><nav class="carousel-nav"><a class="carousel-dot" href="#slide-1" aria-label="Slide 1"></a><a class="carousel-dot" href="#slide-2" aria-label="Slide 2"></a><a class="carousel-dot" href="#slide-3" aria-label="Slide 3"></a></nav></div>Classes
9 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.
| Class | Type | What it does |
|---|---|---|
| Base | Base class of the carousel. On a <div> in the example. Sets flex display, gap, overflow, corner radius and hidden by default.CSS |
|
| Part | Part of the carousel. On a <div> in the example. Sets flex display and alignment.CSS |
|
| Modifier | Modifier, combined with the carousel class. Not used in the example above. A hook for state rules such as .carousel-center > .carousel-item.CSS |
|
| Modifier | Modifier, combined with the carousel class. On a <div> in the example. Sets alignment, and --carousel-gap.CSS |
|
| Modifier | Modifier, combined with the carousel class. Not used in the example above. Sets alignment and overflow.CSS |
|
| Part | Part of the carousel. On a <nav> in the example. Sets flex display, alignment, gap and padding.CSS |
|
| Part | Part of the carousel. On an <a> in the example. Sets width, height, corner radius, background and transition.CSS |
|
| Part | Part of the carousel. On an <a> in the example. Sets absolute position, offsets, stacking order, grid display, alignment and width.CSS |
|
| Part | Part of the carousel. On an <a> in the example. Sets absolute position, offsets, stacking order, grid display, alignment and width.CSS |
Usage
Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<!-- Carousel: start from the base class, then add modifiers -->
<div class="max-w-xl"><div class="carousel carousel-full"><div id="slide-1" class="carousel-item"><div class="aspect-video w-full bg-gradient-to-br from-primary to-accent"></div><a class="carousel-prev" href="#slide-3" aria-label="Previous slide"></a><a class="carousel-next" href="#slide-2" aria-label="Next slide"></a></div><div id="slide-2" class="carousel-item"><div class="aspect-video w-full bg-gradient-to-br from-info to-success"></div><a class="carousel-prev" href="#slide-1" aria-label="Previous slide"></a><a class="carousel-next" href="#slide-3" aria-label="Next slide"></a></div><div id="slide-3" class="carousel-item"><div class="aspect-video w-full bg-gradient-to-br from-warning to-danger"></div><a class="carousel-prev" href="#slide-2" aria-label="Previous slide"></a><a class="carousel-next" href="#slide-1" aria-label="Next slide"></a></div></div><nav class="carousel-nav"><a class="carousel-dot" href="#slide-1" aria-label="Slide 1"></a><a class="carousel-dot" href="#slide-2" aria-label="Slide 2"></a><a class="carousel-dot" href="#slide-3" aria-label="Slide 3"></a></nav></div>Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.
Accessibility
- Wrap navigation in
navwith anaria-labelwhen there is more than one on the page, and mark the current link witharia-current="page". - Every interactive part shows a visible focus ring with
:focus-visible, and tone colors pair with-foregroundtokens that keep text at 4.5:1 or better in light and dark mode.