Carousel

import { WrCarousel, WrCarouselSlide } from 'ngwr/carousel';

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

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

Slide 1

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`

Installation

Basic

API