Navigators and indicators in Angular Carousel component
22 Sep 202524 minutes to read
The navigators and indicators provide manual slide transition controls, allowing users to navigate through carousel content at their own pace and track their current position within the slide sequence.
To customize the Angular Carousel component, you can check on this video:
Navigators
Show or hide previous and next button
The navigator buttons enable manual slide transitions by providing previous and next controls. You can control the visibility of these navigators using the buttonsVisibility
property. The possible property values are as follows:
-
Hidden
– the navigator’s buttons are not visible. -
Visible
– the navigator’s buttons are visible. -
VisibleOnHover
– the navigator’s buttons are visible only when hovering over the carousel.
The following example depicts the code to show/hide the navigators in the carousel.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { CarouselModule } from '@syncfusion/ej2-angular-navigations'
import { Component } from "@angular/core";
import { CarouselButtonVisibility } from "@syncfusion/ej2-angular-navigations";
@Component({
imports: [ ButtonModule, CarouselModule],
standalone: true,
selector: "app-root",
template: `<!-- To Render Carousel. -->
<div class="control-container">
<ejs-carousel [buttonsVisibility]="buttonsVisibility">
<e-carousel-items>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" alt="cardinal" style="height:100%;width:100%;" />
<figcaption class="img-caption">Cardinal</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" alt="kingfisher" style="height:100%;width:100%;" />
<figcaption class="img-caption">Kingfisher</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" alt="keel-billed-toucan" style="height:100%;width:100%;" />
<figcaption class="img-caption">Keel-billed-toucan</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" alt="yellow-warbler" style="height:100%;width:100%;" />
<figcaption class="img-caption">Yellow-warbler</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" />
<figcaption class="img-caption">Bee-eater</figcaption>
</figure>
</ng-template>
</e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>`,
})
export class AppComponent {
public buttonsVisibility: CarouselButtonVisibility = "Visible";
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Show previous and next button on hover
The carousel can display the previous and next buttons only on mouse hover using the buttonsVisibility
property. The following example depicts the code to show the navigators on mouse hover in the carousel.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { CarouselModule } from '@syncfusion/ej2-angular-navigations'
import { Component } from "@angular/core";
import { CarouselButtonVisibility } from "@syncfusion/ej2-angular-navigations";
@Component({
imports: [ ButtonModule, CarouselModule],
standalone: true,
selector: "app-root",
template: `<!-- To Render Carousel. -->
<div class="control-container">
<ejs-carousel [buttonsVisibility]="buttonsVisibility">
<e-carousel-items>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" alt="cardinal" style="height:100%;width:100%;" />
<figcaption class="img-caption">Cardinal</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" alt="kingfisher" style="height:100%;width:100%;" />
<figcaption class="img-caption">Kingfisher</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" alt="keel-billed-toucan" style="height:100%;width:100%;" />
<figcaption class="img-caption">Keel-billed-toucan</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" alt="yellow-warbler" style="height:100%;width:100%;" />
<figcaption class="img-caption">Yellow-warbler</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" />
<figcaption class="img-caption">Bee-eater</figcaption>
</figure>
</ng-template>
</e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>`,
})
export class AppComponent {
public buttonsVisibility: CarouselButtonVisibility = "VisibleOnHover";
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Previous and next button template
Template options are available to customize the previous button using previousButtonTemplate
and the next button using nextButtonTemplate
. The following example depicts the code for applying the template to previous and next buttons in the carousel.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { CarouselModule } from '@syncfusion/ej2-angular-navigations'
import { Component } from "@angular/core";
import { CarouselButtonVisibility } from "@syncfusion/ej2-angular-navigations";
@Component({
imports: [ ButtonModule, CarouselModule],
standalone: true,
selector: "app-root",
template: `<!-- To Render Carousel. -->
<div class="control-container">
<ejs-carousel>
<ng-template #previousButtonTemplate let-data>
<button
ejs-button
cssClass="e-flat e-round"
iconCss="e-icons e-chevron-left-double"
></button>
</ng-template>
<ng-template #nextButtonTemplate let-data>
<button
ejs-button
cssClass="e-flat e-round"
iconCss="e-icons e-chevron-right-double"
></button>
</ng-template>
<e-carousel-items>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" alt="cardinal" style="height:100%;width:100%;" />
<figcaption class="img-caption">Cardinal</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" alt="kingfisher" style="height:100%;width:100%;" />
<figcaption class="img-caption">Kingfisher</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" alt="keel-billed-toucan" style="height:100%;width:100%;" />
<figcaption class="img-caption">Keel-billed-toucan</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" alt="yellow-warbler" style="height:100%;width:100%;" />
<figcaption class="img-caption">Yellow-warbler</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" />
<figcaption class="img-caption">Bee-eater</figcaption>
</figure>
</ng-template>
</e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>`,
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Indicators
Show or hide indicators
Indicators display the total number of slides and highlight the current slide position. You can control the visibility of indicators using the showIndicators
property. The following example depicts the code to show/hide the indicators in the carousel.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { CarouselModule } from '@syncfusion/ej2-angular-navigations'
import { Component } from "@angular/core";
@Component({
imports: [ ButtonModule, CarouselModule],
standalone: true,
selector: "app-root",
template: `<!-- To Render Carousel. -->
<div class="control-container">
<ejs-carousel [showIndicators]="showIndicators">
<e-carousel-items>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" alt="cardinal" style="height:100%;width:100%;" />
<figcaption class="img-caption">Cardinal</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" alt="kingfisher" style="height:100%;width:100%;" />
<figcaption class="img-caption">Kingfisher</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" alt="keel-billed-toucan" style="height:100%;width:100%;" />
<figcaption class="img-caption">Keel-billed-toucan</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" alt="yellow-warbler" style="height:100%;width:100%;" />
<figcaption class="img-caption">Yellow-warbler</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" />
<figcaption class="img-caption">Bee-eater</figcaption>
</figure>
</ng-template>
</e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>`,
})
export class AppComponent {
public showIndicators: Boolean = true;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Indicators Template
Template options are available to customize the indicators using the indicatorsTemplate
property. The following example depicts the code for applying a template to indicators in the carousel.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CarouselModule } from '@syncfusion/ej2-angular-navigations'
import { Component } from "@angular/core";
@Component({
imports: [ CarouselModule],
standalone: true,
selector: "app-root",
template: `<!-- To Render Carousel. -->
<div class="control-container">
<ejs-carousel>
<ng-template #indicatorsTemplate let-data>
<div class="indicator" indicator-index="data.index"></div>
</ng-template>
<e-carousel-items>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" alt="cardinal" style="height:100%;width:100%;" />
<figcaption class="img-caption">Cardinal</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" alt="kingfisher" style="height:100%;width:100%;" />
<figcaption class="img-caption">Kingfisher</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" alt="keel-billed-toucan" style="height:100%;width:100%;" />
<figcaption class="img-caption">Keel-billed-toucan</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" alt="yellow-warbler" style="height:100%;width:100%;" />
<figcaption class="img-caption">Yellow-warbler</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" />
<figcaption class="img-caption">Bee-eater</figcaption>
</figure>
</ng-template>
</e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>`,
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Showing preview of slide in indicator
You can customize the indicators to display preview images of each slide using the indicatorsTemplate
property. The following example depicts the code for showing the preview image using a template for indicators in the carousel.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CarouselModule } from '@syncfusion/ej2-angular-navigations'
import { Component } from "@angular/core";
@Component({
imports: [ CarouselModule],
standalone: true,
selector: "app-root",
template: `<!-- To Render Carousel. -->
<ejs-carousel>
<ng-template #indicatorsTemplate let-data>
<div class="indicator" indicator-index="data.index">
<div class="preview-content"></div>
</div>
</ng-template>
<e-carousel-items>
<e-carousel-item>
<ng-template #template>
<div class="slide-content">Slide 1</div>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<div class="slide-content">Slide 2</div>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<div class="slide-content">Slide 3</div>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<div class="slide-content">Slide 4</div>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<div class="slide-content">Slide 5</div>
</ng-template>
</e-carousel-item>
</e-carousel-items>
</ejs-carousel>`,
})
export class AppComponent {
public getContent(index: number): string {
const slides: string[] = [
"Slide 1",
"Slide 2",
"Slide 3",
"Slide 4",
"Slide 5",
];
return slides[index];
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Indicators Types
Choose different types of indicators available using the indicatorsType
property. The indicator types are categorized as follows:
Default Indicator
A default indicator in a carousel displays a set of dots that indicate the current position of the slide in the carousel. The Default indicator can be achieved by setting the indicatorsType
to Default
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { CarouselModule } from '@syncfusion/ej2-angular-navigations'
import { Component } from "@angular/core";
@Component({
imports: [ ButtonModule, CarouselModule],
standalone: true,
selector: "app-root",
template: `<!-- To Render Carousel. -->
<div class="control-container">
<ejs-carousel [autoPlay]="false" indicatorsType = "Default">
<e-carousel-items>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" alt="cardinal" style="height:100%;width:100%;" />
<figcaption class="img-caption">Cardinal</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" alt="kingfisher" style="height:100%;width:100%;" />
<figcaption class="img-caption">Kingfisher</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" alt="keel-billed-toucan" style="height:100%;width:100%;" />
<figcaption class="img-caption">Keel-billed-toucan</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" alt="yellow-warbler" style="height:100%;width:100%;" />
<figcaption class="img-caption">Yellow-warbler</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" />
<figcaption class="img-caption">Bee-eater</figcaption>
</figure>
</ng-template>
</e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>`,
})
export class AppComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Dynamic Indicator
A dynamic indicator in a carousel provides visual cues or markers that dynamically change or update to indicate the current position. The Dynamic indicator can be achieved by setting the indicatorsType
to Dynamic
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { CarouselModule } from '@syncfusion/ej2-angular-navigations'
import { Component } from "@angular/core";
@Component({
imports: [ ButtonModule, CarouselModule],
standalone: true,
selector: "app-root",
template: `<!-- To Render Carousel. -->
<div class="control-container">
<ejs-carousel [autoPlay]="false" indicatorsType = "Dynamic">
<e-carousel-items>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" alt="cardinal" style="height:100%;width:100%;" />
<figcaption class="img-caption">Cardinal</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" alt="kingfisher" style="height:100%;width:100%;" />
<figcaption class="img-caption">Kingfisher</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" alt="keel-billed-toucan" style="height:100%;width:100%;" />
<figcaption class="img-caption">Keel-billed-toucan</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" alt="yellow-warbler" style="height:100%;width:100%;" />
<figcaption class="img-caption">Yellow-warbler</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" />
<figcaption class="img-caption">Bee-eater</figcaption>
</figure>
</ng-template>
</e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>`,
})
export class AppComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Fraction Indicator
The fraction indicator type displays the current slide index and total slide count as a fraction. The Fraction indicator can be achieved by setting the indicatorsType
to Fraction
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { CarouselModule } from '@syncfusion/ej2-angular-navigations'
import { Component } from "@angular/core";
@Component({
imports: [ ButtonModule, CarouselModule],
standalone: true,
selector: "app-root",
template: `<!-- To Render Carousel. -->
<div class="control-container">
<ejs-carousel [autoPlay]="false" indicatorsType = "Fraction">
<e-carousel-items>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" alt="cardinal" style="height:100%;width:100%;" />
<figcaption class="img-caption">Cardinal</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" alt="kingfisher" style="height:100%;width:100%;" />
<figcaption class="img-caption">Kingfisher</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" alt="keel-billed-toucan" style="height:100%;width:100%;" />
<figcaption class="img-caption">Keel-billed-toucan</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" alt="yellow-warbler" style="height:100%;width:100%;" />
<figcaption class="img-caption">Yellow-warbler</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" />
<figcaption class="img-caption">Bee-eater</figcaption>
</figure>
</ng-template>
</e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>`,
})
export class AppComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Progress Indicator
The Progress Indicator type displays the current slide as a progress bar. The Progress indicator can be achieved by setting the indicatorsType
to Progress
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { CarouselModule } from '@syncfusion/ej2-angular-navigations'
import { Component } from "@angular/core";
@Component({
imports: [ ButtonModule, CarouselModule],
standalone: true,
selector: "app-root",
template: `<!-- To Render Carousel. -->
<div class="control-container">
<ejs-carousel [autoPlay]="false" indicatorsType = "Progress">
<e-carousel-items>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" alt="cardinal" style="height:100%;width:100%;" />
<figcaption class="img-caption">Cardinal</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" alt="kingfisher" style="height:100%;width:100%;" />
<figcaption class="img-caption">Kingfisher</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" alt="keel-billed-toucan" style="height:100%;width:100%;" />
<figcaption class="img-caption">Keel-billed-toucan</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" alt="yellow-warbler" style="height:100%;width:100%;" />
<figcaption class="img-caption">Yellow-warbler</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" />
<figcaption class="img-caption">Bee-eater</figcaption>
</figure>
</ng-template>
</e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>`,
})
export class AppComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Play button
Show or hide the play button
The carousel autoPlay
functionality can be controlled through the user interface using the showPlayButton
property. When this property is enabled, slide transitions are controlled using the play and pause button, which provides manual control over the automatic slide progression. This property depends on the buttonsVisibility
property. The following example depicts the code to show the play button in the carousel.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { CarouselModule } from '@syncfusion/ej2-angular-navigations'
import { Component } from "@angular/core";
@Component({
imports: [ ButtonModule, CarouselModule],
standalone: true,
selector: "app-root",
template: `<!-- To Render Carousel. -->
<div class="control-container">
<ejs-carousel [showPlayButton]="showPlayButton">
<e-carousel-items>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" alt="cardinal" style="height:100%;width:100%;" />
<figcaption class="img-caption">Cardinal</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" alt="kingfisher" style="height:100%;width:100%;" />
<figcaption class="img-caption">Kingfisher</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" alt="keel-billed-toucan" style="height:100%;width:100%;" />
<figcaption class="img-caption">Keel-billed-toucan</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" alt="yellow-warbler" style="height:100%;width:100%;" />
<figcaption class="img-caption">Yellow-warbler</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" />
<figcaption class="img-caption">Bee-eater</figcaption>
</figure>
</ng-template>
</e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>`,
})
export class AppComponent {
public showPlayButton: Boolean = true;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Play button template
Template options are available to customize the play button using the playButtonTemplate
property. The following example depicts the code for applying a template to play Button in the carousel.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { CarouselModule } from '@syncfusion/ej2-angular-navigations'
import { CarouselComponent } from "@syncfusion/ej2-angular-navigations";
import { ButtonComponent } from "@syncfusion/ej2-angular-buttons";
import { Component, ViewChild } from "@angular/core";
@Component({
imports: [ ButtonModule, CarouselModule],
standalone: true,
selector: "app-root",
template: `<!-- To Render Carousel. -->
<div class="control-container">
<ejs-carousel [showPlayButton]="showPlayButton" #carousel>
<ng-template #playButtonTemplate let-data>
<button
ejs-button
cssClass="e-info playBtn"
[content]="content"
(click)="btnClick()"
#playButton
></button>
</ng-template>
<e-carousel-items>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" alt="cardinal" style="height:100%;width:100%;" />
<figcaption class="img-caption">Cardinal</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" alt="kingfisher" style="height:100%;width:100%;" />
<figcaption class="img-caption">Kingfisher</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" alt="keel-billed-toucan" style="height:100%;width:100%;" />
<figcaption class="img-caption">Keel-billed-toucan</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" alt="yellow-warbler" style="height:100%;width:100%;" />
<figcaption class="img-caption">Yellow-warbler</figcaption>
</figure>
</ng-template>
</e-carousel-item>
<e-carousel-item>
<ng-template #template>
<figure class="img-container">
<img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" />
<figcaption class="img-caption">Bee-eater</figcaption>
</figure>
</ng-template>
</e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>`,
})
export class AppComponent {
@ViewChild("carousel") carousel!: CarouselComponent;
@ViewChild("playButton") playButton!: ButtonComponent;
public showPlayButton: Boolean = true;
public content: string = "Pause";
public btnClick() {
if (this.carousel.autoPlay) {
this.playButton.content = "Play";
this.carousel.autoPlay = false;
} else {
this.playButton.content = "Pause";
this.carousel.autoPlay = true;
}
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));