Angular

Search results

Navigators and Indicators in Angular Carousel component

18 May 2022 / 8 minutes to read

The navigators and indicators are used to transition the slides manually.

Navigators

Show or hide previous and next button

In navigators, the previous and next slide transition buttons are used to perform slide transitions manually. You can show/hide the 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.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.css

import { Component } from "@angular/core";
import { CarouselButtonVisibility } from "@syncfusion/ej2-angular-navigations";

@Component({
  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 { 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 { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, ButtonModule, CarouselModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

.control-container {
  height: 360px;
  margin: 0 auto;
  width: 600px;
}

.img-container {
  height: 100%;
  margin: 0;
}

.img-caption {
  color: #fff;
  font-size: 1rem;
  position: absolute;
  bottom: 3rem;
  width: 100%;
  text-align: center;
}

Show previous and next button on hover

In the carousel, you can show 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.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.css

import { Component } from "@angular/core";
import { CarouselButtonVisibility } from "@syncfusion/ej2-angular-navigations";

@Component({
  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 { 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 { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, ButtonModule, CarouselModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

.control-container {
  height: 360px;
  margin: 0 auto;
  width: 600px;
}

.img-container {
  height: 100%;
  margin: 0;
}

.img-caption {
  color: #fff;
  font-size: 1rem;
  position: absolute;
  bottom: 3rem;
  width: 100%;
  text-align: center;
}

Previous and next button template

Template options are provided 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.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.css

import { Component } from "@angular/core";
import { CarouselButtonVisibility } from "@syncfusion/ej2-angular-navigations";

@Component({
  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 { 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 { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, ButtonModule, CarouselModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

.control-container {
  height: 360px;
  margin: 0 auto;
  width: 600px;
}

.img-container {
  height: 100%;
  margin: 0;
}

.img-caption {
  color: #fff;
  font-size: 1rem;
  position: absolute;
  bottom: 3rem;
  width: 100%;
  text-align: center;
}

Indicators

Show or hide indicators

In indicators, the total slides and current slide state have been depicted. You can show/hide the indicators using the showIndicators property. The following example depicts the code to show/hide the indicators in the carousel.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.css

import { Component } from "@angular/core";

@Component({
  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 { 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 { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, ButtonModule, CarouselModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

.control-container {
  height: 360px;
  margin: 0 auto;
  width: 600px;
}

.img-container {
  height: 100%;
  margin: 0;
}

.img-caption {
  color: #fff;
  font-size: 1rem;
  position: absolute;
  bottom: 3rem;
  width: 100%;
  text-align: center;
}

Indicators Template

Template option is provided to customize the indicators by using the indicatorTemplate property. The following example depicts the code for applying a template to indicators in the carousel.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.css

import { Component } from "@angular/core";

@Component({
  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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CarouselModule } from '@syncfusion/ej2-angular-navigations';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, CarouselModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

.control-container {
  height: 360px;
  margin: 0 auto;
  width: 600px;
}

.img-container {
  height: 100%;
  margin: 0;
}

.img-caption {
  color: #fff;
  font-size: 1rem;
  position: absolute;
  bottom: 3rem;
  width: 100%;
  text-align: center;
}

.e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar.e-template .indicator {
  background-color: #ececec;
  border-radius: 0.25rem;
  cursor: pointer;
  height: 0.5rem;
  margin: 0.5rem;
  width: 1.5rem;
}

.e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar.e-active .indicator {
  background-color: #3c78ef;
}

Showing preview of slide in indicator

You can customize the indicators by showing the preview image of each slide using the indicatorTemplate property. The following example depicts the code for showing the preview image using a template for indicators in the carousel.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.css

import { Component } from "@angular/core";

@Component({
  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">{{ getContent(data.index) }}</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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CarouselModule } from '@syncfusion/ej2-angular-navigations';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, CarouselModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

.e-carousel {
  background-color: #adb5bd;
  height: 300px !important;
  margin: 0 auto;
  width: 500px !important;
}

.e-carousel .slide-content {
  align-items: center;
  display: flex;
  font-size: 1.25rem;
  height: 100%;
  justify-content: center;
}

.e-carousel .e-carousel-items,
.e-carousel .e-carousel-navigators {
  height: calc(100% - 3rem);
}

.e-carousel .e-carousel-navigators .e-previous,
.e-carousel .e-carousel-navigators .e-next,
.e-carousel .e-carousel-navigators .nav-btn {
  padding: 0;
}

.e-carousel .e-carousel-navigators .nav-btn:active,
.e-carousel .e-carousel-navigators .nav-btn:focus,
.e-carousel .e-carousel-navigators .nav-btn:hover {
  background-color: transparent !important;
  color: inherit;
}

.e-carousel .e-carousel-navigators svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-width: 8px;
  height: 2rem;
  vertical-align: middle;
  width: 2rem;
}

.e-carousel .e-carousel-navigators .e-previous svg {
  transform: rotate(180deg);
}

.e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .indicator {
  background-color: #ececec;
  border: 1px solid black;
  border-radius: 0.25rem;
  cursor: pointer;
  height: 3.5rem;
  margin: 0.5rem;
  width: 5rem;
}

.e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar.e-active .indicator {
  background-color: #adb5bd;
}

.preview-content {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}

Play button

Show or hide the play button

In the carousel, autoPlay actions have been controlled by using the showPlayButton property in the user interface. When you enable this property, the slide transitions are controlled using this play and pause button. This property depends on the buttonsVisibility property. The following example depicts the code to show the play button in the carousel.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.css

import { Component } from "@angular/core";

@Component({
  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 { 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 { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, ButtonModule, CarouselModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

.control-container {
  height: 360px;
  margin: 0 auto;
  width: 600px;
}

.img-container {
  height: 100%;
  margin: 0;
}

.img-caption {
  color: #fff;
  font-size: 1rem;
  position: absolute;
  bottom: 3rem;
  width: 100%;
  text-align: center;
}

Play button template

Template option is provided to customize the play button by using the playButtonTemplate property. The following example depicts the code for applying a template to play Button in the carousel.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.css

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `<!-- To Render Carousel. -->
<div class="control-container">
  <ejs-carousel [showPlayButton]="showPlayButton">
    <ng-template #playButtonTemplate let-data>
      <button
        ejs-button
        cssClass="e-info playBtn"
        [content]="content"
        (click)="btnClick()"
      ></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 {
  public showPlayButton: Boolean = true;
  public content: string = "Pause";
  public btnClick() {
let buttonObj = (document.querySelector(".playBtn") as any).ej2_instances[0];
let carouselObj = (document.querySelector(".e-carousel") as any).ej2_instances[0];
if (carouselObj.autoPlay) {
  buttonObj.content = "Play";
  carouselObj.autoPlay = false;
} else {
  buttonObj.content = "Pause";
  carouselObj.autoPlay = true;
}
  }
}

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 { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, ButtonModule, CarouselModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

.control-container {
  height: 360px;
  margin: 0 auto;
  width: 600px;
}

.img-container {
  height: 100%;
  margin: 0;
}

.img-caption {
  color: #fff;
  font-size: 1rem;
  position: absolute;
  bottom: 3rem;
  width: 100%;
  text-align: center;
}

Contents

Navigators
Show or hide previous and next button
Show previous and next button on hover
Previous and next button template
Indicators
Show or hide indicators
Indicators Template
Showing preview of slide in indicator
Play button
Show or hide the play button
Play button template

Contents

Navigators
Show or hide previous and next button
Show previous and next button on hover
Previous and next button template
Indicators
Show or hide indicators
Indicators Template
Showing preview of slide in indicator
Play button
Show or hide the play button
Play button template