Run the CLI
Use the CLI to add the component to your project.
Carousel
A slideshow component for cycling through elements with support for mouse drag, touch swipe, and automatic playback.
1
2
3
4
5
Installation
Install dependencies
Install the required dependencies for this component.
Add the component files
Create the component directory structure and add the following files to your project.
Examples
default
1
2
3
4
5
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ZardCardComponent } from '../../card';
import { ZardCarouselImports } from '../carousel.imports';
@Component({
imports: [ZardCarouselImports, ZardCardComponent],
template: `
<div class="mx-auto w-3/4 max-w-md">
<z-carousel>
<z-carousel-content>
@for (slide of slides; track slide) {
<z-carousel-item>
<z-card>
<div class="flex h-25 items-center justify-center text-4xl font-semibold md:h-50">
{{ slide }}
</div>
</z-card>
</z-carousel-item>
}
</z-carousel-content>
</z-carousel>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoCarouselDefaultComponent {
protected slides = ['1', '2', '3', '4', '5'];
}
dot controls
1
2
3
4
5
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ZardCardComponent } from '@/shared/components/card';
import { ZardCarouselImports } from '@/shared/components/carousel/carousel.imports';
@Component({
imports: [ZardCarouselImports, ZardCardComponent],
template: `
<div class="mx-auto w-3/4 max-w-md">
<z-carousel zControls="dot">
<z-carousel-content>
@for (slide of slides; track slide) {
<z-carousel-item>
<z-card>
<div class="flex h-25 items-center justify-center text-4xl font-semibold md:h-50">
{{ slide }}
</div>
</z-card>
</z-carousel-item>
}
</z-carousel-content>
</z-carousel>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoCarouselDotControlsComponent {
protected slides = ['1', '2', '3', '4', '5'];
}
orientation
1
2
3
4
5
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ZardCardComponent } from '../../card';
import { ZardCarouselImports } from '../carousel.imports';
@Component({
imports: [ZardCarouselImports, ZardCardComponent],
template: `
<div class="mx-auto w-3/4 max-w-md">
<z-carousel zOrientation="vertical" class="w-full">
<z-carousel-content class="h-[200px] md:h-[300px]">
@for (slide of slides; track slide) {
<z-carousel-item>
<z-card class="w-full">
<div class="flex h-[100px] items-center justify-center text-4xl font-semibold md:h-[200px]">
{{ slide }}
</div>
</z-card>
</z-carousel-item>
}
</z-carousel-content>
</z-carousel>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoCarouselOrientationComponent {
protected slides = ['1', '2', '3', '4', '5'];
}
sizes
To set the size of the items, you can use the basis utility class on the <z-carousel-item />.
1
2
3
4
5
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ZardCardComponent } from '@/shared/components/card';
import { ZardCarouselImports } from '@/shared/components/carousel/carousel.imports';
@Component({
imports: [ZardCarouselImports, ZardCardComponent],
template: `
<div class="mx-auto w-3/4 max-w-md">
<z-carousel>
<z-carousel-content>
@for (slide of slides; track slide) {
<z-carousel-item class="md:basis-1/2 lg:basis-1/3">
<z-card>
<div class="flex h-25 items-center justify-center text-4xl font-semibold md:h-50">
{{ slide }}
</div>
</z-card>
</z-carousel-item>
}
</z-carousel-content>
</z-carousel>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoCarouselSizeComponent {
protected slides = ['1', '2', '3', '4', '5'];
}
spacing
To set the spacing between the items, we use a pl-[VALUE] utility on the <z-carousel-item /> and a negative -ml-[VALUE] on the <z-carousel-content />.
1
2
3
4
5
6
Content class: -ml-4
Item class: basis-1/3 pl-4
import { Component, signal, computed, ChangeDetectionStrategy } from '@angular/core';
import { ZardCardComponent } from '@/shared/components/card';
import { ZardCarouselImports } from '@/shared/components/carousel/carousel.imports';
import { ZardSegmentedComponent } from '@/shared/components/segmented';
import { mergeClasses } from '@/shared/utils/merge-classes';
@Component({
imports: [ZardCarouselImports, ZardSegmentedComponent, ZardCardComponent],
template: `
<div class="mx-auto w-3/4 max-w-4xl">
<div class="mb-4 flex justify-center gap-2">
<z-segmented [zOptions]="options" zDefaultValue="md" (zChange)="onChange($event)" />
</div>
<z-carousel [zOptions]="{ align: 'start' }">
<z-carousel-content [class]="contentSpacingClass()">
@for (slide of slides; track slide) {
<z-carousel-item [class]="itemSpacingClass()">
<z-card>
<div class="flex h-40 items-center justify-center text-4xl font-semibold">{{ slide }}</div>
</z-card>
</z-carousel-item>
}
</z-carousel-content>
</z-carousel>
<div class="mt-4 text-center text-sm">
<p>
<strong>Content class:</strong>
{{ contentSpacingClass() }}
</p>
<p>
<strong>Item class:</strong>
{{ itemSpacingClass() }}
</p>
</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoCarouselSpacingComponent {
protected slides = ['1', '2', '3', '4', '5', '6'];
readonly currentSpacing = signal<'sm' | 'md' | 'lg' | 'xl'>('md');
// Computed classes based on current spacing
protected readonly contentSpacingClass = computed(() => {
const spacing = this.currentSpacing();
const spacingMap = {
sm: '-ml-2',
md: '-ml-4',
lg: '-ml-6',
xl: '-ml-8',
};
return spacingMap[spacing];
});
protected readonly itemSpacingClass = computed(() => {
const spacing = this.currentSpacing();
const spacingMap = {
sm: 'pl-2',
md: 'pl-4',
lg: 'pl-6',
xl: 'pl-8',
};
return mergeClasses('basis-1/3', spacingMap[spacing]);
});
options = [
{
value: 'sm',
label: 'Small',
},
{
value: 'md',
label: 'Medium',
},
{
value: 'lg',
label: 'Large',
},
{
value: 'xl',
label: 'Extra Large',
},
];
onChange(value: string) {
this.currentSpacing.set(value as 'sm' | 'md' | 'lg' | 'xl');
}
}
api demo
1
2
3
4
5
Current slide: 1 / 0
Scroll progress: 0%
Can scroll prev: No
Can scroll next: No
Slides in view:
plugins
1
2
3
4
5
Current slide: 1 / 0