# Carousel

> Slide carousel with prev/next, dots, and optional autoplay. Autoplay holds while the pointer is over it, while focus is inside it, and while a drag is in flight — hovering is not a way to stop moving content for someone who never uses a mouse, which is what WCAG 2.2.2 asks for.

Source: https://ngwr.dev/reference/components/carousel

## Installation

```angular-ts
import { WrCarousel, WrCarouselSlide } from 'ngwr/carousel';

@Component({ imports: [WrCarousel, WrCarouselSlide] })
export class MyComponent {}
```

## Basic

```angular-html
<wr-carousel [(active)]="i" autoplay>
  <wr-carousel-slide>Slide 1</wr-carousel-slide>
  <wr-carousel-slide>Slide 2</wr-carousel-slide>
</wr-carousel>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `prevLabel` | Accessible name of the previous-slide button. Falls back to `carousel.prev`. | `string \| null` | `null` |
| `nextLabel` | Accessible name of the next-slide button. Falls back to `carousel.next`. | `string \| null` | `null` |
| `paginationLabel` | Accessible name of the dot group. Falls back to `carousel.pagination`. | `string \| null` | `null` |
| `ariaLabel` | Accessible name of the carousel itself. Falls back to `carousel.label`. | `string \| null` | `null` |
| `roledescription` | Word a screen reader speaks IN PLACE OF the `group` role. Falls back to `carousel.roledescription`, then `'carousel'`. | `string \| null` | `null` |
| `active` | Active slide index. Two-way bindable. | `number` | `0` |
| `showArrows` | Show prev / next arrow buttons. | `boolean` | `true` |
| `showDots` | Show dot indicators below the slides. | `boolean` | `true` |
| `autoplay` | Auto-advance slides. | `boolean` | `false` |
| `intervalMs` | Autoplay interval (ms). | `number` | `4000` |
| `loop` | Wrap around at the ends. | `boolean` | `true` |