Interactive

Autoplay carousel

Adds autoplay to the CSS carousel: pauses on hover, on focus, in a background tab and with reduced motion, has a play and pause button, and the current dot fills up until the next slide. Needs monsoon.js.

Interactive7 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

carousel-autoplay.html

<div class="carousel-auto max-w-xl" data-m-carousel-auto data-m-carousel-auto-interval="4000">
  <div class="carousel carousel-full">
    <div id="auto-1" class="carousel-item"><div class="aspect-video w-full bg-gradient-to-br from-primary to-accent grid place-items-center text-white text-xl font-semibold">Plan</div></div>
    <div id="auto-2" class="carousel-item"><div class="aspect-video w-full bg-gradient-to-br from-info to-success grid place-items-center text-white text-xl font-semibold">Build</div></div>
    <div id="auto-3" class="carousel-item"><div class="aspect-video w-full bg-gradient-to-br from-warning to-danger grid place-items-center text-white text-xl font-semibold">Ship</div></div>
  </div>
  <nav class="carousel-nav"><a class="carousel-dot" href="#auto-1" aria-label="Slide 1"></a><a class="carousel-dot" href="#auto-2" aria-label="Slide 2"></a><a class="carousel-dot" href="#auto-3" aria-label="Slide 3"></a></nav>
</div>

JavaScript API

Attribute

data-m-carousel-auto

Options

Option	Description
`data-m-carousel-auto-interval="4000"`
`data-m-carousel-auto-force (play even with reduced motion)`

Methods

Method	Description
`Monsoon.carouselAuto(el).next()`
`Monsoon.carouselAuto(el).prev()`
`Monsoon.carouselAuto(el).go(2)`
`Monsoon.carouselAuto(el).play()`
`Monsoon.carouselAuto(el).pause()`

Events

Event	Description
`monsoon:slide { index }`

Classes

7 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
	Part	Part of the autoplay carousel. On a <div> in the example. Sets block display, overflow, width, background, generated content and absolute position. CSS `.carousel-auto { position: relative; display: block; } .carousel-auto .carousel-dot { position: relative; overflow: hidden; }`
	Modifier	Modifier, combined with the carousel class. Not used in the example above. Sets grid display, alignment, width, height, margin and text color. CSS `.carousel-play[aria-pressed=true]::before { mask-image: var(--m-ix-pause); } .carousel-play:focus-visible { outline: var(--m-ring); outline-offset: var(--m-ring-offset); }`
	Base	Base class of the autoplay carousel. On a <div> in the example. Sets flex display, gap, overflow, corner radius and hidden by default. CSS `.carousel::-webkit-scrollbar { display: none; } @media (prefers-reduced-motion: reduce) { .carousel { scroll-behavior: auto; } }`
	Part	Part of the autoplay carousel. On a <div> in the example. Sets flex display and alignment. CSS `.carousel-item { position: relative; display: flex; flex: 0 0 auto; scroll-snap-align: start; } .carousel-full > .carousel-item { flex-basis: 100%; }`
	Modifier	Modifier, combined with the carousel class. On a <div> in the example. Sets alignment, and `--carousel-gap`. CSS `.carousel-full { --carousel-gap: 0; } .carousel-full > .carousel-item { flex-basis: 100%; }`
	Part	Part of the autoplay carousel. On a <nav> in the example. Sets flex display, alignment, gap and padding. CSS `.carousel-nav { display: flex; justify-content: center; gap: 0.5rem; padding-block: 0.875rem; }`
	Part	Part of the autoplay carousel. On an <a> in the example. Sets width, height, corner radius, background and transition. CSS `.carousel-dot:hover { background: var(--muted-foreground); } .carousel-dot:focus { width: 1.5rem; background: var(--primary); }`

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Autoplay carousel: start from the base class, then add modifiers -->
<div class="carousel-auto max-w-xl" data-m-carousel-auto data-m-carousel-auto-interval="4000">
  <div class="carousel carousel-full">
    <div id="auto-1" class="carousel-item"><div class="aspect-video w-full bg-gradient-to-br from-primary to-accent grid place-items-center text-white text-xl font-semibold">Plan</div></div>
    <div id="auto-2" class="carousel-item"><div class="aspect-video w-full bg-gradient-to-br from-info to-success grid place-items-center text-white text-xl font-semibold">Build</div></div>
    <div id="auto-3" class="carousel-item"><div class="aspect-video w-full bg-gradient-to-br from-warning to-danger grid place-items-center text-white text-xl font-semibold">Ship</div></div>
  </div>
  <nav class="carousel-nav"><a class="carousel-dot" href="#auto-1" aria-label="Slide 1"></a><a class="carousel-dot" href="#auto-2" aria-label="Slide 2"></a><a class="carousel-dot" href="#auto-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.

#Example

#JavaScript API

#Classes

#Usage

#Accessibility

#Related components

Example

JavaScript API

Classes

Usage

Accessibility

Related components