Carousel

Demo & usage

More examples

<sv-carousel
  [slides]="slides"
  [autoPlay]="true"
  [interval]="5000"
  [loop]="true"
  indicator="numbers"
  aspectRatio="16/9"
  (slideChange)="onSlide($event)"
  (pausedChange)="onPause($event)" />

<!-- slides = [
  { id: 'sale', title: 'Summer sale', image: '/img/sale.webp', cta: 'Shop the sale', ctaLink: '/sale' },
  { id: 'news', title: 'Join the newsletter', cta: 'Subscribe' },
] — a CTA with ctaLink is a link; one without is a button you handle. -->
<sv-carousel [slides]="slides" (ctaClick)="onCta($event)" />

When to use

• Cycling through a small set of images or promotional slides.
• You want autoplay with arrows and a choice of indicator styles.
• For browsing many images on demand, use the Image Gallery.

Async states

• loading
• empty
• error
• retry

Outputs

Wire it to your API

This component is headless about transport: it renders what you give it and reports what the user asks for. Nothing below requires @styloviz/data — drive it from whatever you already use.

<sv-carousel
  [slides]="data.items()"
  [loading]="data.loading()"
  [error]="data.error()"
  [filtered]="data.filtered()"
  (retry)="data.reload()"
/>

// This component reports its state but does not emit a query, so drive
// it from your own fetch and bind the three async inputs.
readonly items = signal<Row[]>([]);
readonly loading = signal(false);
readonly error = signal<SvDataError | null>(null);

async load(): Promise<void> {
  this.loading.set(true);
  this.error.set(null);
  try {
    this.items.set(await this.api.fetchRows());
  } catch (e) {
    this.error.set(toSvDataError(e));
  } finally {
    this.loading.set(false);
  }
}

• This component does not emit a query, so it renders what you give it. Fetch on your own trigger and bind `slides`, `loading` and `error`.
• Set `filtered` when a search or filter is active. It is the difference between "you have no orders" and "no orders match this filter" — telling a customer with 4,000 orders the first one reads as a bug.
• Normalize failures with `toSvDataError()` from `@styloviz/core`. It derives `retryable` from the status, so a 404 does not get a "Try again" button that can only fail again.

Full walkthrough: Connecting to a backend.

Customization & theming

• Indicator styles: dots, lines, numbers or none.
• Autoplay with configurable interval, `pauseOnHover`, and a built-in pause/play button.
• Custom slide templates.

Best practices

• Do: Leave `pauseOnHover` on (default) so users can read each slide; a pause/play control also appears during autoplay.
• Don't: Don't hide important content or CTAs solely inside auto-advancing slides.
• Tip: Keep slide counts low (3–6); carousels have low engagement past the first slide.

Accessibility

• Exposed as a `region` with `aria-roledescription="carousel"`; slides are labelled groups and a live region announces changes (silenced while auto-rotating).
• Auto-play pauses on hover and keyboard focus and can be stopped with the pause button (WCAG 2.2.2); ←/→ navigate slides.
• Prev/next, indicators and pause are labelled buttons; the active indicator exposes `aria-current`.