# Carousel · MIAN

A horizontally scrolling, snapping track. Swipe, trackpad and keyboard; optional arrows and dots.

- Id: `carousel` · Category: Layout & utilities · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/carousel
- Use for: carousel, slider of cards, horizontal scroll, image slider.
- Avoid: As the only way to reach content, carousels hide things.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `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.

## Examples

### With controls

```html
<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>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/carousel/source