Carousel

An image/content slider with navigation arrows, dot indicators, autoplay, keyboard support, and captions.

Input	Type	Default	Description
`slides`	`NgOatCarouselSlide[]`	`[]`	Array of slide data (src, alt, title, description)
`slideCount`	`number`	`0`	Total slides (for projected content)
`autoplay`	`boolean`	`false`	Auto-advance slides
`interval`	`number`	`5000`	Autoplay interval (ms)
`loop`	`boolean`	`true`	Loop back after last slide
`showArrows`	`boolean`	`true`	Show prev/next buttons
`showDots`	`boolean`	`true`	Show dot indicators
`dotsOverlay`	`boolean`	`false`	Overlay dots on slides
`showCaptions`	`boolean`	`true`	Show slide captions
`aspectRatio`	`'auto' \| '16:9' \| '4:3' \| '1:1'`	`'auto'`	Aspect ratio constraint
`pauseOnHover`	`boolean`	`true`	Pause autoplay on hover/focus
`activeIndex`	`number`	`0`	Two-way bound active slide index
`ariaLabel`	`string`	`'Image carousel'`	Accessible label

Import & Usage

typescript

import { Component } from '@angular/core';
import { NgOatCarousel, type NgOatCarouselSlide } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatCarousel],
  template: `
    <ng-oat-carousel
      [slides]="slides"
      [autoplay]="true"
      [interval]="5000"
      aspectRatio="16:9" />
  `,
})
export class ExampleComponent {
  slides: NgOatCarouselSlide[] = [
    { src: 'https://picsum.photos/800/450', alt: 'Slide 1', title: 'Hello' },
    { src: 'https://picsum.photos/800/451', alt: 'Slide 2' },
  ];
}

Basic Carousel

html

<ng-oat-carousel [slides]="slides" aspectRatio="16:9" />

// slides: NgOatCarouselSlide[] = [
//   { src: 'photo1.jpg', alt: 'Photo 1' },
//   { src: 'photo2.jpg', alt: 'Photo 2' },
// ];

With Captions

Mountain Vista

A breathtaking view from the summit.

html

<ng-oat-carousel [slides]="slides" aspectRatio="16:9" [dotsOverlay]="true" />

// slides include title & description for captions

Autoplay

Pauses on hover/focus. Interval: 3 seconds.

html

<ng-oat-carousel [slides]="slides" [autoplay]="true" [interval]="3000" aspectRatio="16:9" />

No Loop (finite)

Arrows disable at the first and last slide.

html

<ng-oat-carousel [slides]="slides" [loop]="false" aspectRatio="16:9" />

Minimal (no arrows, dots only)

html

<ng-oat-carousel [slides]="slides" [showArrows]="false" aspectRatio="16:9" />

Controlled Index

Active index: 0

html

<ng-oat-carousel [slides]="slides" [(activeIndex)]="currentIndex" />
<button (click)="currentIndex.set(0)">Slide 1</button>

Aspect Ratios

4:3

1:1

html

<ng-oat-carousel [slides]="slides" aspectRatio="4:3" />
<ng-oat-carousel [slides]="slides" aspectRatio="1:1" />

Projected Content

Custom Slide 1

Custom Slide 2

Custom Slide 3

html

<ng-oat-carousel [slideCount]="3">
  <div class="carousel-slide">Custom Slide 1</div>
  <div class="carousel-slide">Custom Slide 2</div>
  <div class="carousel-slide">Custom Slide 3</div>
</ng-oat-carousel>

Keyboard Navigation

Focus the carousel and use ← → arrow keys to navigate between slides.

Card Carousel

A horizontal scrollable product carousel with navigation arrows, "See All" link, and mobile touch scroll.

Input	Type	Default	Description
`heading`	`string`	`''`	Section heading text
`items`	`NgOatProductCard[]`	`[]`	Array of product card data
`showSeeAll`	`boolean`	`true`	Show the "See All" button
`scrollAmount`	`number`	`0`	Custom px to scroll (0 = auto)
`ariaLabel`	`string`	`'Product carousel'`	Accessible label

Product Carousel

Featured Products

Sale

Wireless Headphones

Active noise cancellation with 30-hour battery life.

$79.99 $129.99 4.5 (1284)

Ultra Boost Running Shoes

Lightweight mesh upper with responsive cushioning.

$149.00 4.8 (856)

New

Smart Watch Pro

Health tracking, GPS, and 5-day battery.

$299.00 $349.00 4.3 (2103)

Travel Backpack 40L

Water-resistant with laptop compartment and USB port.

$59.99 4.6 (437)

Best Seller

50mm Prime Lens

f/1.8 aperture for stunning portraits and low light.

$199.00 4.9 (612)

LED Desk Lamp

Adjustable colour temperature with USB charging.

$34.99 $49.99 4.2 (318)

html

<ng-oat-card-carousel
  heading="Featured Products"
  [items]="products"
  (seeAllClick)="onSeeAll()"
  (cardClick)="onCardClick($event)"
/>

Without "See All"

New Arrivals

Sale

Wireless Headphones

Active noise cancellation with 30-hour battery life.

$79.99 $129.99 4.5 (1284)

Ultra Boost Running Shoes

Lightweight mesh upper with responsive cushioning.

$149.00 4.8 (856)

New

Smart Watch Pro

Health tracking, GPS, and 5-day battery.

$299.00 $349.00 4.3 (2103)

Travel Backpack 40L

Water-resistant with laptop compartment and USB port.

$59.99 4.6 (437)

html

<ng-oat-card-carousel
  heading="New Arrivals"
  [items]="products"
  [showSeeAll]="false"
/>

Many Cards (scrollable)

All Products

Sale

Wireless Headphones

Active noise cancellation with 30-hour battery life.

$79.99 $129.99 4.5 (1284)

Ultra Boost Running Shoes

Lightweight mesh upper with responsive cushioning.

$149.00 4.8 (856)

New

Smart Watch Pro

Health tracking, GPS, and 5-day battery.

$299.00 $349.00 4.3 (2103)

Travel Backpack 40L

Water-resistant with laptop compartment and USB port.

$59.99 4.6 (437)

Best Seller

50mm Prime Lens

f/1.8 aperture for stunning portraits and low light.

$199.00 4.9 (612)

LED Desk Lamp

Adjustable colour temperature with USB charging.

$34.99 $49.99 4.2 (318)

Mechanical Keyboard

Cherry MX switches with RGB backlighting.

$89.99 4.7 (924)

Ergonomic Mouse

Vertical design reduces wrist strain, 6 buttons.

$39.99 4.4 (561)

Sale

27" 4K Monitor

IPS panel, 99% sRGB, USB-C with 65W PD.

$449.00 $549.00 4.6 (1432)

HD Webcam 1080p

Auto-focus, built-in mic, ring light.

$49.99 4.1 (289)

html

<ng-oat-card-carousel
  heading="All Products"
  [items]="products"
  ariaLabel="Full product catalog"
/>

Mobile Touch Scroll

On mobile (<768px) the nav arrows hide and the track becomes touch-scrollable with scroll-snap.