Carousel for Angular

import { AuiCarousel } from '@absoluteui/angular/carousel';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Carousel page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { carousel: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import type { CarouselSlide } from '@absoluteui/components/carousel';
import { AuiCarousel } from '@absoluteui/angular/carousel';

@Component({
  selector: 'app-announcements',
  imports: [AuiCarousel],
  template: `<aui-carousel label="Announcements" [slides]="slides" [loop]="true" [autoplay]="6000"></aui-carousel>`,
})
export class AnnouncementsComponent {
  readonly slides: CarouselSlide[] = [{ content: 'The office is closed on Monday.' }, { content: 'Benefits enrollment closes on the 30th.' }];
}

<aui-carousel>

Class AuiCarousel; template reference #ref="auiCarousel".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Accessible name of the carousel.
slides	readonly CarouselSlide[]		Required. Slides: { content: Node | string, label? } (1 to 100).
index	number	'0'	Current slide (0-based).
loop	boolean	false	Wrap from the last slide to the first and back.
autoplay	number | null	null	Rotation interval in milliseconds (at least 2000), or null.
showPicker	boolean	true	Show the slide picker buttons.
locale	string	'en-US'	Locale of the control labels and slide positions.

Outputs

Output	Payload	Description
(changed)	CarouselChangeDetail	The user moved to another slide: { index }. Re-emits aui-change.

Methods

Call them through a viewChild query or a template reference.

Method	Description
goTo(index: number): void	Show a slide (no event); clamped, or wrapped with loop.
next(): void	Show the next slide (no event).
previous(): void	Show the previous slide (no event).