Carousel

A carousel with motion and swipe built using Embla.

import { Component } from '@angular/core';
import { HlmCardContentDirective, HlmCardDirective } from '@spartan-ng/ui-card-helm';
import {
    HlmCarouselComponent,
    HlmCarouselContentComponent,
    HlmCarouselItemComponent,
    HlmCarouselNextComponent,
    HlmCarouselPreviousComponent,
} from '@spartan-ng/ui-carousel-helm';

@Component({
    selector: 'spartan-carousel-preview',
    imports: [
        HlmCarouselComponent,
        HlmCarouselContentComponent,
        HlmCarouselItemComponent,
        HlmCarouselNextComponent,
        HlmCarouselPreviousComponent,
        HlmCardDirective,
        HlmCardContentDirective,
    ],
    template: `
        <div class="flex w-full items-center justify-center p-4">
            <hlm-carousel class="w-full max-w-xs">
                <hlm-carousel-content>
                    @for (item of items; track item) {
                        <hlm-carousel-item>
                            <div class="p-1">
                                <section hlmCard>
                                    <p hlmCardContent class="flex aspect-square items-center justify-center p-6">
                                        <span class="text-4xl font-semibold">{{ item }}</span>
                                    </p>
                                </section>
                            </div>
                        </hlm-carousel-item>
                    }
                </hlm-carousel-content>
                <button hlm-carousel-previous></button>
                <button hlm-carousel-next></button>
            </hlm-carousel>
        </div>
    `,
})
export class CarouselPreviewComponent {
    public items = Array.from({ length: 5 }, (_, i) => i + 1);
}

Installation

npx nx g @spartan-ng/cli:ui carousel

Usage

import {
    HlmCarouselComponent,
    HlmCarouselContentComponent,
    HlmCarouselItemComponent,
    HlmCarouselNextComponent,
    HlmCarouselPreviousComponent,
} from '@spartan-ng/ui-carousel-helm';

<hlm-carousel>
  <hlm-carousel-content>
    <hlm-carousel-item>
      Item Content
    </hlm-carousel-item>
  </hlm-carousel-content>
  <button hlm-carousel-previous></button>
  <button hlm-carousel-next></button>
</hlm-carousel>

Examples

Sizes

The size of the items can be set by using the basis utility class on the hlm-carousel-item .

import { Component } from '@angular/core';
import { HlmCardContentDirective, HlmCardDirective } from '@spartan-ng/ui-card-helm';
import {
    HlmCarouselComponent,
    HlmCarouselContentComponent,
    HlmCarouselItemComponent,
    HlmCarouselNextComponent,
    HlmCarouselPreviousComponent,
} from '@spartan-ng/ui-carousel-helm';

@Component({
    selector: 'spartan-carousel-sizes',
    imports: [
        HlmCarouselComponent,
        HlmCarouselContentComponent,
        HlmCarouselItemComponent,
        HlmCarouselNextComponent,
        HlmCarouselPreviousComponent,
        HlmCardDirective,
        HlmCardContentDirective,
    ],
    template: `
        <div class="flex w-full items-center justify-center p-4">
            <hlm-carousel class="w-full max-w-xs">
                <hlm-carousel-content>
                    @for (item of items; track item) {
                        <hlm-carousel-item class="md:basis-1/2 lg:basis-1/3">
                            <div class="p-1">
                                <section hlmCard>
                                    <p hlmCardContent class="flex aspect-square items-center justify-center p-6">
                                        <span class="text-4xl font-semibold">{{ item }}</span>
                                    </p>
                                </section>
                            </div>
                        </hlm-carousel-item>
                    }
                </hlm-carousel-content>
                <button hlm-carousel-previous></button>
                <button hlm-carousel-next></button>
            </hlm-carousel>
        </div>
    `,
})
export class CarouselSizesComponent {
    public items = Array.from({ length: 5 }, (_, i) => i + 1);
}

Spacing

The spacing between the items can be set by using a p-[VALUE] utility on the hlm-carousel-item and a negative -ml-[VALUE] on the hlm-carousel-content .

import { Component } from '@angular/core';
import { HlmCardContentDirective, HlmCardDirective } from '@spartan-ng/ui-card-helm';
import {
    HlmCarouselComponent,
    HlmCarouselContentComponent,
    HlmCarouselItemComponent,
    HlmCarouselNextComponent,
    HlmCarouselPreviousComponent,
} from '@spartan-ng/ui-carousel-helm';

@Component({
    selector: 'spartan-carousel-spacing',
    imports: [
        HlmCarouselComponent,
        HlmCarouselContentComponent,
        HlmCarouselItemComponent,
        HlmCarouselNextComponent,
        HlmCarouselPreviousComponent,
        HlmCardDirective,
        HlmCardContentDirective,
    ],
    template: `
        <div class="flex w-full items-center justify-center p-4">
            <hlm-carousel class="w-full max-w-xs">
                <hlm-carousel-content class="-ml-1">
                    @for (item of items; track item) {
                        <hlm-carousel-item class="pl-1 md:basis-1/2 lg:basis-1/3">
                            <div class="p-1">
                                <section hlmCard>
                                    <p hlmCardContent class="flex aspect-square items-center justify-center p-6">
                                        <span class="text-4xl font-semibold">{{ item }}</span>
                                    </p>
                                </section>
                            </div>
                        </hlm-carousel-item>
                    }
                </hlm-carousel-content>
                <button hlm-carousel-previous></button>
                <button hlm-carousel-next></button>
            </hlm-carousel>
        </div>
    `,
})
export class CarouselSpacingComponent {
    public items = Array.from({ length: 5 }, (_, i) => i + 1);
}

Orientation

The orientation prop can be used to set the orientation of the carousel.

import { Component } from '@angular/core';
import { HlmCardContentDirective, HlmCardDirective } from '@spartan-ng/ui-card-helm';
import {
    HlmCarouselComponent,
    HlmCarouselContentComponent,
    HlmCarouselItemComponent,
    HlmCarouselNextComponent,
    HlmCarouselPreviousComponent,
} from '@spartan-ng/ui-carousel-helm';

@Component({
    selector: 'spartan-carousel-orientation',
    imports: [
        HlmCarouselComponent,
        HlmCarouselContentComponent,
        HlmCarouselItemComponent,
        HlmCarouselNextComponent,
        HlmCarouselPreviousComponent,
        HlmCardDirective,
        HlmCardContentDirective,
    ],
    host: {
        class: 'w-full',
    },
    template: `
        <div class="flex w-full items-center justify-center p-4">
            <hlm-carousel class="w-full max-w-xs" orientation="vertical">
                <hlm-carousel-content class="-mt-1 h-[200px]">
                    @for (item of items; track item) {
                        <hlm-carousel-item class="pt-1 md:basis-1/2">
                            <div class="p-1">
                                <section hlmCard>
                                    <p hlmCardContent class="flex items-center justify-center p-6">
                                        <span class="text-4xl font-semibold">{{ item }}</span>
                                    </p>
                                </section>
                            </div>
                        </hlm-carousel-item>
                    }
                </hlm-carousel-content>
                <button hlm-carousel-previous></button>
                <button hlm-carousel-next></button>
            </hlm-carousel>
        </div>
    `,
})
export class CarouselOrientationComponent {
    public items = Array.from({ length: 5 }, (_, i) => i + 1);
}

Slide Count

Use hlm-carousel-slide-display to display the current and total slides.

import { Component } from '@angular/core';
import { HlmCardContentDirective, HlmCardDirective } from '@spartan-ng/ui-card-helm';
import {
    HlmCarouselComponent,
    HlmCarouselContentComponent,
    HlmCarouselItemComponent,
    HlmCarouselNextComponent,
    HlmCarouselPreviousComponent,
    HlmCarouselSlideDisplayComponent,
} from '@spartan-ng/ui-carousel-helm';

@Component({
    selector: 'spartan-carousel-slide-count',
    imports: [
        HlmCarouselComponent,
        HlmCarouselContentComponent,
        HlmCarouselItemComponent,
        HlmCarouselNextComponent,
        HlmCarouselPreviousComponent,
        HlmCardDirective,
        HlmCardContentDirective,
        HlmCarouselSlideDisplayComponent,
    ],
    template: `
        <div class="flex w-full items-center justify-center p-4">
            <hlm-carousel class="w-full max-w-xs">
                <hlm-carousel-content>
                    @for (item of items; track item) {
                        <hlm-carousel-item>
                            <div class="p-1">
                                <section hlmCard>
                                    <p hlmCardContent class="flex aspect-square items-center justify-center p-6">
                                        <span class="text-4xl font-semibold">{{ item }}</span>
                                    </p>
                                </section>
                            </div>
                        </hlm-carousel-item>
                    }
                </hlm-carousel-content>
                <button hlm-carousel-previous></button>
                <button hlm-carousel-next></button>
                <hlm-carousel-slide-display class="mt-1 flex justify-end" />
            </hlm-carousel>
        </div>
    `,
})
export class CarouselSlideCountComponent {
    public items = Array.from({ length: 5 }, (_, i) => i + 1);
}

Plugins

You can use the plugins plugins prop to add plugins to the carousel.

import { Component } from '@angular/core';
import { HlmCardContentDirective, HlmCardDirective } from '@spartan-ng/ui-card-helm';
import {
    HlmCarouselComponent,
    HlmCarouselContentComponent,
    HlmCarouselItemComponent,
    HlmCarouselNextComponent,
    HlmCarouselPreviousComponent,
} from '@spartan-ng/ui-carousel-helm';
import Autoplay from 'embla-carousel-autoplay';

@Component({
    selector: 'spartan-carousel-plugins',
    imports: [
        HlmCarouselComponent,
        HlmCarouselContentComponent,
        HlmCarouselItemComponent,
        HlmCarouselNextComponent,
        HlmCarouselPreviousComponent,
        HlmCardDirective,
        HlmCardContentDirective,
    ],
    template: `
        <div class="flex w-full items-center justify-center p-4">
            <hlm-carousel class="w-full max-w-xs" [plugins]="plugins">
                <hlm-carousel-content>
                    @for (item of items; track item) {
                        <hlm-carousel-item>
                            <div class="p-1">
                                <section hlmCard>
                                    <p hlmCardContent class="flex aspect-square items-center justify-center p-6">
                                        <span class="text-4xl font-semibold">{{ item }}</span>
                                    </p>
                                </section>
                            </div>
                        </hlm-carousel-item>
                    }
                </hlm-carousel-content>
                <button hlm-carousel-previous></button>
                <button hlm-carousel-next></button>
            </hlm-carousel>
        </div>
    `,
})
export class CarouselPluginsComponent {
    public items = Array.from({ length: 5 }, (_, i) => i + 1);
    public plugins = [Autoplay({ delay: 3000 })];
}

See the Embla Carousel docs for more information on using plugins.

Checkbox

Card

Components are in alpha

Getting Started

Stack

UI

Components