Run the CLI
Use the CLI to add the component to your project.
npx @ngzard/ui@latest add carouselCarousel
A slideshow component for cycling through elements with support for mouse drag, touch swipe, and automatic playback.
1
2
3
4
5
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ZardCardComponent } from '../../card';
import { ZardCarouselModule } from '../carousel.module';
@Component({
imports: [ZardCarouselModule, 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-[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 ZardDemoCarouselDefaultComponent {
protected slides = ['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 { ZardCarouselModule } from '../carousel.module';
@Component({
imports: [ZardCarouselModule, 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-[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 ZardDemoCarouselDefaultComponent {
protected slides = ['1', '2', '3', '4', '5'];
}
dot controls
1
2
3
4
5
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ZardCardComponent } from '../../card';
import { ZardCarouselModule } from '../carousel.module';
@Component({
imports: [ZardCarouselModule, 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-[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 ZardDemoCarouselDotControlsComponent {
protected slides = ['1', '2', '3', '4', '5'];
}
orientation
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
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
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