Carousel
A carousel with motion and swipe built using Embla.
1
2
3
4
5
import { Component } from '@angular/core';
import { HlmCarouselComponent, HlmCarouselFallbackDirective, HlmCarouselImageDirective } from '@spartan-ng/ui-carousel-helm';
@Component({
selector: 'spartan-carousel-preview',
standalone: true,
imports: [HlmCarouselComponent, HlmCarouselContentComponent,HlmCarouselItemComponent,HlmCarouselNextComponent,HlmCarouselPreviousComponent],
template: `
<div class="flex items-center justify-center w-full 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 items-center justify-center p-6 aspect-square">
<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 {
items = Array.from({ length: 5}, (_, i) => i + 1);
}Installation
npx nx g @spartan-ng/cli:ui carousel
ng 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 .
1
2
3
4
5
import { Component } from '@angular/core';
import { HlmCarouselComponent, HlmCarouselFallbackDirective, HlmCarouselImageDirective } from '@spartan-ng/ui-carousel-helm';
@Component({
selector: 'spartan-carousel-preview',
standalone: true,
imports: [HlmCarouselComponent, HlmCarouselContentComponent,HlmCarouselItemComponent,HlmCarouselNextComponent,HlmCarouselPreviousComponent],
template: `
<div class="flex items-center justify-center w-full 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 items-center justify-center p-6 aspect-square">
<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 {
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 .
1
2
3
4
5
import { Component } from '@angular/core';
import { HlmCarouselComponent, HlmCarouselFallbackDirective, HlmCarouselImageDirective } from '@spartan-ng/ui-carousel-helm';
@Component({
selector: 'spartan-carousel-preview',
standalone: true,
imports: [HlmCarouselComponent, HlmCarouselContentComponent,HlmCarouselItemComponent,HlmCarouselNextComponent,HlmCarouselPreviousComponent],
template: `
<div class="flex items-center justify-center w-full 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 items-center justify-center p-6 aspect-square">
<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 {
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 { HlmCarouselComponent, HlmCarouselFallbackDirective, HlmCarouselImageDirective } from '@spartan-ng/ui-carousel-helm';
@Component({
selector: 'spartan-carousel-preview',
standalone: true,
imports: [HlmCarouselComponent, HlmCarouselContentComponent,HlmCarouselItemComponent,HlmCarouselNextComponent,HlmCarouselPreviousComponent],
host: {
class: 'w-full',
},
template: `
<div class="flex items-center justify-center w-full 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 {
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 { HlmCarouselComponent, HlmCarouselFallbackDirective, HlmCarouselImageDirective } from '@spartan-ng/ui-carousel-helm';
import Autoplay from 'embla-carousel-autoplay';
@Component({
selector: 'spartan-carousel-preview',
standalone: true,
imports: [HlmCarouselComponent, HlmCarouselContentComponent,HlmCarouselItemComponent,HlmCarouselNextComponent,HlmCarouselPreviousComponent],
template: `
<div class="flex items-center justify-center w-full 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 items-center justify-center p-6 aspect-square">
<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 {
items = Array.from({ length: 5}, (_, i) => i + 1);
public plugins = [Autoplay({ delay: 3000 })];
}See the Embla Carousel docs for more information on using plugins.