import { Component } from '@angular/core';
import { WrCarousel, WrCarouselSlide } from 'ngwr/carousel';
@Component({ imports: [WrCarousel, WrCarouselSlide] })
export class MyComponent {}Carousel
Slides with previous and next buttons, dots and optional autoplay.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic
Give the carousel a height: the slides fill it. Autoplay pauses on hover and focus, and does not run while the reader prefers reduced motion.
<wr-carousel [(active)]="i" autoplay style="aspect-ratio: 16 / 9">
<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. Held while the pointer or keyboard focus is inside the carousel and during a swipe, and does not run at all while the reader prefers reduced motion — followed live, so turning the setting on mid-session stops the slides and turning it off starts them. | boolean | false |
intervalMs | Autoplay interval (ms). | number | 4000 |
loop | Wrap around at the ends. | boolean | true |
<wr-carousel-slide>
| Name | Description | Type | Default |
|---|---|---|---|
roledescription | Word a screen reader speaks IN PLACE OF the group role. Falls back to carousel.slideRoledescription, then 'slide'. | string | null | null |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/carousel's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-carousel-dot-active-radius | var(--wr-border-radius-pill) | .wr-carousel |
--wr-carousel-dots-gap | var(--wr-space-sm) | .wr-carousel |
--wr-carousel-font-family | var(--wr-font-family-base) | .wr-carousel |