Carousel

A row of slides with previous and next buttons.

import { … } from '@inlaylab/ivorie/carousel'

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_CARD_IMPORTS } from '@inlaylab/ivorie/card';
import { IV_CAROUSEL_IMPORTS } from '@inlaylab/ivorie/carousel';

@Component({
  selector: 'demo-carousel',
  imports: [IV_CAROUSEL_IMPORTS, IV_CARD_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-carousel class="w-full max-w-48 sm:max-w-xs" aria-label="Numbers">
      <iv-carousel-content>
        @for (n of slides; track n) {
          <iv-carousel-item>
            <div class="p-1">
              <iv-card>
                <iv-card-content class="flex aspect-square items-center justify-center p-6">
                  <span class="text-4xl font-semibold">{{ n }}</span>
                </iv-card-content>
              </iv-card>
            </div>
          </iv-carousel-item>
        }
      </iv-carousel-content>
      <button ivCarouselPrevious></button>
      <button ivCarouselNext></button>
    </iv-carousel>
  `,
})
export default class CarouselDemo {
  readonly slides = [1, 2, 3, 4, 5];
}

Installation

CLI

npm

npx ivorie add carousel

import { … } from '@inlaylab/ivorie/carousel'

Built on CSS scroll snap, so touch, trackpad and wheel scrolling come from the browser. No extra dependency. There is no loop or autoplay.

Usage

import { IV_CAROUSEL_IMPORTS } from '@inlaylab/ivorie/carousel';

<iv-carousel aria-label="Photos">
  <iv-carousel-content>
    <iv-carousel-item>One</iv-carousel-item>
    <iv-carousel-item>Two</iv-carousel-item>
  </iv-carousel-content>
  <button ivCarouselPrevious></button>
  <button ivCarouselNext></button>
</iv-carousel>

Examples

Sizes

Set the slide width with basis-* classes.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_CARD_IMPORTS } from '@inlaylab/ivorie/card';
import { IV_CAROUSEL_IMPORTS } from '@inlaylab/ivorie/carousel';

@Component({
  selector: 'demo-carousel-size',
  imports: [IV_CAROUSEL_IMPORTS, IV_CARD_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-carousel class="w-full max-w-48 sm:max-w-xs md:max-w-sm" aria-label="Numbers">
      <iv-carousel-content>
        @for (n of slides; track n) {
          <iv-carousel-item class="basis-1/2 lg:basis-1/3">
            <div class="p-1">
              <iv-card>
                <iv-card-content class="flex aspect-square items-center justify-center p-6">
                  <span class="text-3xl font-semibold">{{ n }}</span>
                </iv-card-content>
              </iv-card>
            </div>
          </iv-carousel-item>
        }
      </iv-carousel-content>
      <button ivCarouselPrevious></button>
      <button ivCarouselNext></button>
    </iv-carousel>
  `,
})
export default class CarouselSizeDemo {
  readonly slides = [1, 2, 3, 4, 5];
}

Vertical

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_CARD_IMPORTS } from '@inlaylab/ivorie/card';
import { IV_CAROUSEL_IMPORTS } from '@inlaylab/ivorie/carousel';

@Component({
  selector: 'demo-carousel-vertical',
  imports: [IV_CAROUSEL_IMPORTS, IV_CARD_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-carousel orientation="vertical" class="my-14 w-full max-w-xs" aria-label="Numbers">
      <iv-carousel-content class="h-[200px]">
        @for (n of slides; track n) {
          <iv-carousel-item class="basis-1/2">
            <div class="p-1">
              <iv-card>
                <iv-card-content class="flex items-center justify-center p-6">
                  <span class="text-3xl font-semibold">{{ n }}</span>
                </iv-card-content>
              </iv-card>
            </div>
          </iv-carousel-item>
        }
      </iv-carousel-content>
      <button ivCarouselPrevious></button>
      <button ivCarouselNext></button>
    </iv-carousel>
  `,
})
export default class CarouselVerticalDemo {
  readonly slides = [1, 2, 3, 4, 5];
}

API

Every part also accepts class.

iv-carousel

Name	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Scroll direction.

button[ivCarouselPrevious], button[ivCarouselNext]

Name	Type	Default	Description
`variant`	`ButtonVariants['variant']`	`'outline'`	Button look.
`size`	`ButtonVariants['size']`	`'icon-sm'`	Button size.

Each button scrolls one viewport.

Other parts

iv-carousel-content (the scroll track), iv-carousel-item (one slide).

Accessibility

Give the carousel an aria-label. The buttons have screen reader labels "Previous slide" and "Next slide".