# <motion-slider>

Horizontal slider with spring-snap drag, arrow-button navigation, and dot indicators.
Slides snap to full-viewport-width positions on release. Responsive to container resize.

**Use it for:** a set of full-width slides, such as product photos or
testimonials, that people move through by dragging, with the arrows or
with the dots.

**Avoid it for:** content that everyone must see, because later slides are
easy to miss. It always shows one slide at the full width, so it does not
fit a row of small cards. For a grid of images that open large, use
`motion-gallery`.

**Accessibility:** the slider takes keyboard focus, and the Left and Right
arrow keys change the slide. The arrows are native buttons labelled
"Previous slide" and "Next slide", and keyboard focus on them shows an
outline. At the first and last slide, the arrow that cannot move has
`aria-disabled="true"` and does nothing. The dots are not focusable and
have no labels. The slider has no role or label and does not announce slide
changes, and slides out of view are not hidden from screen readers or the
Tab key. Add `role="region"` and an `aria-label` to the slider, and make
sure each slide makes sense on its own.

**Reduced motion:** the slide changes at once, with no spring. While you
drag, the slides still follow the pointer, and the dots still use a short
CSS transition.

**Common mistakes:** adding slides after the slider is built; it reads its
children once, so later children do not become slides.

Docs: https://www.motion-components.dev/docs/components/motion-slider/

## Install

```js
import 'motion-components/motion-slider'
```

Or without a build step:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/motion-components@1/dist/motion-slider.js/+esm"></script>
```

## Example

```html
<motion-slider gap="32">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</motion-slider>
```

## Attributes

| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `gap` | `number` | `24` | Space between slides in pixels. |
| `arrows` | `boolean` | `true` | Show prev/next arrow buttons. Set `"false"` to hide them. |

## Properties

| Property | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the active slide. |

## Methods

| Method | Description |
| --- | --- |
| `next()` | Moves to the next slide. Does nothing on the last one. |
| `prev()` | Moves to the previous slide. Does nothing on the first one. |
| `goTo()` | Navigate to the slide at `index`. Pass `initialVelocity` (px/s) for a flick-snap feel. Called before the slider is built, it sets the slide the slider starts on. |

## Events

The `motion-*` events bubble and are composed.

| Event | Description |
| --- | --- |
| `motion-change` | Dispatched when the active slide index changes. `detail: { index }`. |

## Slots

| Slot | Description |
| --- | --- |
| (default) | Slides. Each direct child becomes a slide in the carousel. Both attributes are read once while the slider is built. |

## CSS custom properties

| Property | Description |
| --- | --- |
| `--mc-color-accent` | Color of the keyboard focus ring on the arrows. |