Ng - Carousel
A slideshow component for cycling through elements—images or slides of text—like a Carousel.
Styled byLS Carousel
Basic examples
Caption 0
Description Description 0
Caption 2
Description Description 2
Caption 4
Description Description 4
Caption 6
Description Description 6
Caption 8
Description Description 8
Caption 10
Description Description 10
<Carousel [Images]="Images" [Stats]="true"
[Captions]="Captions" [NavigationArrows]="Arrows" [NavigationIndicators]="Indicators"
[Interval]="Interval" [PauseOnHover]="PauseOnHover"></Carousel>
<!-- With dummy images for the test purpose -->
<Carousel [Dummy]="true" [Captions]="false" [NavigationIndicators]="false"></Carousel>
Images!: CarouselItem[];
Interval = 3000;
Captions = true;
Arrows = true;
Indicators = true;
PauseOnHover = false;
ngOnInit(): void {
this.Images = [];
[0, 2, 4, 6, 8, 10].forEach((item, index) => this.Images.push({
Caption: 'Caption ' + item.toString(),
Description: 'Description Description ' + item.toString(),
Src: `https://source.unsplash.com/random/${960 + item}x${400 + item / 2}?sig=${index}`
// Src: `https://picsum.photos/600/400/?image=${item}`
} as CarouselItem));
}
Variations
Slides only
<Carousel [Images]="Images" [Interval]="3000" [PauseOnHover]="true"
[Captions]="false" [NavigationArrows]="false" [NavigationIndicators]="false"></Carousel>
With controls
Adding in the previous and next controls:
<Carousel [Images]="Images" [Interval]="3000" [PauseOnHover]="true"
[Captions]="false" [NavigationArrows]="true" [NavigationIndicators]="false"></Carousel>
With indicators
You can also add the indicators to the Carousel, alongside the controls, too.
<Carousel [Images]="Images" [Interval]="3000" [PauseOnHover]="true"
[Captions]="false" [NavigationArrows]="true" [NavigationIndicators]="true"></Carousel>
With captions
Caption 0
Description Description 0
Caption 2
Description Description 2
Caption 4
Description Description 4
Caption 6
Description Description 6
Caption 8
Description Description 8
Caption 10
Description Description 10
<Carousel [Images]="Images" [Interval]="3000" [PauseOnHover]="true"
[Captions]="true" [NavigationArrows]="true" [NavigationIndicators]="true"></Carousel>
Material style
Caption 0
Description Description 0
Caption 2
Description Description 2
Caption 4
Description Description 4
Caption 6
Description Description 6
Caption 8
Description Description 8
Caption 10
Description Description 10
<Carousel [Images]="Images" [Interval]="3000" [PauseOnHover]="true"
[Rounded]="true" [Shadow]="true"
[Captions]="true" [NavigationArrows]="true" [NavigationIndicators]="true"></Carousel>
Dark variant
Caption 0
Description Description 0
Caption 2
Description Description 2
Caption 4
Description Description 4
Caption 6
Description Description 6
Caption 8
Description Description 8
Caption 10
Description Description 10
<Carousel [Images]="Images" [Interval]="3000" [PauseOnHover]="true" [Dark]="true"
[Captions]="true" [NavigationArrows]="true" [NavigationIndicators]="true"></Carousel>