Carousel
A carousel with motion and swipe built using Embla.
1
2
3
4
5
import { Component } from '@angular/core';
import { HlmCard, HlmCardContent } from '@spartan-ng/helm/card';
import {
HlmCarousel,
HlmCarouselContent,
HlmCarouselItem,
HlmCarouselNext,
HlmCarouselPrevious,
} from '@spartan-ng/helm/carousel';
@Component({
selector: 'spartan-carousel-preview',
imports: [
HlmCarousel,
HlmCarouselContent,
HlmCarouselItem,
HlmCarouselNext,
HlmCarouselPrevious,
HlmCard,
HlmCardContent,
],
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 CarouselPreview {
public items = Array.from({ length: 5 }, (_, i) => i + 1);
}About
Carousel is built on top of Embla Carousel library and the embla-carousel-angular wrapper .
Installation
npx nx g @spartan-ng/cli:ui carousel
ng g @spartan-ng/cli:ui carousel
Usage
import {
HlmCarousel
HlmCarouselContent
HlmCarouselItem
HlmCarouselNext
HlmCarouselPrevious
} from '@spartan-ng/helm/carousel';<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>Helm API
HlmCarouselContent
Selector: hlm-carousel-content
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmCarouselItem
Selector: hlm-carousel-item
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmCarouselNext
Selector: button[hlm-carousel-next], button[hlmCarouselNext]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmCarouselPrevious
Selector: button[hlm-carousel-previous], button[hlmCarouselPrevious]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmCarouselSlideDisplay
Selector: hlm-carousel-slide-display
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
| slideClass | ClassValue | text-muted-foreground text-sm | - |
| label | string | Slide | Screen reader only text for the slide display |
HlmCarousel
Selector: hlm-carousel
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
| orientation | 'horizontal' | 'vertical' | horizontal | - |
| options | Omit<EmblaOptionsType, 'axis'> | - | - |
| plugins | EmblaPluginType[] | [] | - |
Examples
Sizes
The size of the items can be set by using the basis utility class on the hlm-carousel-item .
1
2
3
4
5
import { Component } from '@angular/core';
import { HlmCard, HlmCardContent } from '@spartan-ng/helm/card';
import {
HlmCarousel,
HlmCarouselContent,
HlmCarouselItem,
HlmCarouselNext,
HlmCarouselPrevious,
} from '@spartan-ng/helm/carousel';
@Component({
selector: 'spartan-carousel-sizes',
imports: [
HlmCarousel,
HlmCarouselContent,
HlmCarouselItem,
HlmCarouselNext,
HlmCarouselPrevious,
HlmCard,
HlmCardContent,
],
template: `
<div class="flex w-full items-center justify-center p-4">
<hlm-carousel class="w-full max-w-sm">
<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-3xl 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 CarouselSizes {
public items = Array.from({ length: 5 }, (_, i) => i + 1);
}Spacing
The spacing between the items can be set by using a pl-[VALUE] utility on the hlm-carousel-item and a negative -ml-[VALUE] on the hlm-carousel-content .
1
2
3
4
5
import { Component } from '@angular/core';
import { HlmCard, HlmCardContent } from '@spartan-ng/helm/card';
import {
HlmCarousel,
HlmCarouselContent,
HlmCarouselItem,
HlmCarouselNext,
HlmCarouselPrevious,
} from '@spartan-ng/helm/carousel';
@Component({
selector: 'spartan-carousel-spacing',
imports: [
HlmCarousel,
HlmCarouselContent,
HlmCarouselItem,
HlmCarouselNext,
HlmCarouselPrevious,
HlmCard,
HlmCardContent,
],
template: `
<div class="flex w-full items-center justify-center p-4">
<hlm-carousel class="w-full max-w-sm">
<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-2xl 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 CarouselSpacing {
public items = Array.from({ length: 5 }, (_, i) => i + 1);
}Orientation
The orientation prop can be used to set the orientation of the carousel.
1
2
3
4
5
import { Component } from '@angular/core';
import { HlmCard, HlmCardContent } from '@spartan-ng/helm/card';
import {
HlmCarousel,
HlmCarouselContent,
HlmCarouselItem,
HlmCarouselNext,
HlmCarouselPrevious,
} from '@spartan-ng/helm/carousel';
@Component({
selector: 'spartan-carousel-orientation',
imports: [
HlmCarousel,
HlmCarouselContent,
HlmCarouselItem,
HlmCarouselNext,
HlmCarouselPrevious,
HlmCard,
HlmCardContent,
],
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-3xl 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 CarouselOrientation {
public items = Array.from({ length: 5 }, (_, i) => i + 1);
}Slide Count
Use hlm-carousel-slide-display to display the current and total slides.
1
2
3
4
5
import { Component } from '@angular/core';
import { HlmCard, HlmCardContent } from '@spartan-ng/helm/card';
import {
HlmCarousel,
HlmCarouselContent,
HlmCarouselItem,
HlmCarouselNext,
HlmCarouselPrevious,
HlmCarouselSlideDisplay,
} from '@spartan-ng/helm/carousel';
@Component({
selector: 'spartan-carousel-slide-count',
imports: [
HlmCarousel,
HlmCarouselContent,
HlmCarouselItem,
HlmCarouselNext,
HlmCarouselPrevious,
HlmCard,
HlmCardContent,
HlmCarouselSlideDisplay,
],
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 CarouselSlideCount {
public items = Array.from({ length: 5 }, (_, i) => i + 1);
}Plugins
You can use the plugins plugins prop to add plugins to the carousel.
1
2
3
4
5
import { Component } from '@angular/core';
import { HlmCard, HlmCardContent } from '@spartan-ng/helm/card';
import {
HlmCarousel,
HlmCarouselContent,
HlmCarouselItem,
HlmCarouselNext,
HlmCarouselPrevious,
} from '@spartan-ng/helm/carousel';
import Autoplay from 'embla-carousel-autoplay';
@Component({
selector: 'spartan-carousel-plugins',
imports: [
HlmCarousel,
HlmCarouselContent,
HlmCarouselItem,
HlmCarouselNext,
HlmCarouselPrevious,
HlmCard,
HlmCardContent,
],
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 CarouselPlugins {
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.