Carousel
A horizontally scrolling, snapping track. Swipe, trackpad and keyboard; optional arrows and dots.
With controls
Udon
Soba
Ramen
Pho
Mee
<div class="mn-carousel mn-carousel-peek" aria-label="Featured noodles" style="max-width:34rem">
<div class="mn-carousel-track">
<div class="mn-carousel-item"><div class="mn-card mn-card-flat" style="height:10rem;display:grid;place-items:center;background:color-mix(in oklab, var(--mn-primary) 10%, var(--mn-surface))"><span class="mn-h3">Udon</span></div></div>
<div class="mn-carousel-item"><div class="mn-card mn-card-flat" style="height:10rem;display:grid;place-items:center;background:color-mix(in oklab, var(--mn-primary) 18%, var(--mn-surface))"><span class="mn-h3">Soba</span></div></div>
<div class="mn-carousel-item"><div class="mn-card mn-card-flat" style="height:10rem;display:grid;place-items:center;background:color-mix(in oklab, var(--mn-primary) 26%, var(--mn-surface))"><span class="mn-h3">Ramen</span></div></div>
<div class="mn-carousel-item"><div class="mn-card mn-card-flat" style="height:10rem;display:grid;place-items:center;background:color-mix(in oklab, var(--mn-primary) 34%, var(--mn-surface))"><span class="mn-h3">Pho</span></div></div>
<div class="mn-carousel-item"><div class="mn-card mn-card-flat" style="height:10rem;display:grid;place-items:center;background:color-mix(in oklab, var(--mn-primary) 42%, var(--mn-surface))"><span class="mn-h3">Mee</span></div></div>
</div>
<button class="mn-carousel-prev" aria-label="Previous slide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
<button class="mn-carousel-next" aria-label="Next slide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
<div class="mn-carousel-dots"></div>
</div>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/carousel.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-carousel | Wrapper. |
| mn-carousel-track · mn-carousel-item | Scroll-snap track and slides. |
| mn-carousel-prev · mn-carousel-next · mn-carousel-dots | Controls; dots are generated if empty. |
| mn-carousel-peek · mn-carousel-multi | Show a peek of the next slide · three per view. |
Accessibility
- The track is a focusable region; arrow keys move one slide. Each slide is labelled "n of N". Nothing auto-advances.