React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Navigators and Indicators in React Carousel component

22 Sep 2022 / 7 minutes to read

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

To have a glance at how to customize the React Carousel component’s navigator buttons, play button, and indicators, watch this video:

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
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
import * as React from "react";
import * as ReactDom from "react-dom";
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.showButtons = "Visible";
    }
    render() {
        return (<div className='control-container'>
    <CarouselComponent buttonsVisibility={this.showButtons}>
      <CarouselItemsDirective>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
      </CarouselItemsDirective>
    </CarouselComponent>
  </div>);
    }
}
ReactDom.render(<App />, document.getElementById("element"));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Carousel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
.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;
}
Copied to clipboard
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective, CarouselButtonVisibility } from "@syncfusion/ej2-react-navigations";
import * as React from "react";
import * as ReactDom from "react-dom";

class App extends React.Component<{}, {}> {
  public showButtons: CarouselButtonVisibility = "Visible";

  public render() {
return (
  <div className='control-container'>
    <CarouselComponent buttonsVisibility={this.showButtons}>
      <CarouselItemsDirective>
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
      </CarouselItemsDirective>
    </CarouselComponent>
  </div>
);
  }
}

ReactDom.render(<App />, document.getElementById("element"));

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
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
import * as React from "react";
import * as ReactDom from "react-dom";
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.showButtons = "VisibleOnHover";
    }
    render() {
        return (<div className='control-container'>
    <CarouselComponent buttonsVisibility={this.showButtons}>
      <CarouselItemsDirective>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
      </CarouselItemsDirective>
    </CarouselComponent>
  </div>);
    }
}
ReactDom.render(<App />, document.getElementById("element"));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Carousel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
.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;
}
Copied to clipboard
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective, CarouselButtonVisibility } from "@syncfusion/ej2-react-navigations";
import * as React from "react";
import * as ReactDom from "react-dom";

class App extends React.Component<{}, {}> {
  public showButtons: CarouselButtonVisibility = "VisibleOnHover";

  public render() {
return (
  <div className='control-container'>
    <CarouselComponent buttonsVisibility={this.showButtons}>
      <CarouselItemsDirective>
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
      </CarouselItemsDirective>
    </CarouselComponent>
  </div>
);
  }
}

ReactDom.render(<App />, document.getElementById("element"));

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
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import * as React from "react";
import * as ReactDom from "react-dom";
class App extends React.Component {
    previousButtonTemplate(props) {
        return (<ButtonComponent className="e-btn" cssClass="e-flat e-round" iconCss="e-icons e-chevron-left-double"/>);
    }
    nextButtonTemplate(props) {
        return (<ButtonComponent className="e-btn" cssClass="e-flat e-round" iconCss="e-icons e-chevron-right-double"/>);
    }
    render() {
        return (<div className='control-container'>
    <CarouselComponent previousButtonTemplate={this.previousButtonTemplate.bind(this)} nextButtonTemplate={this.nextButtonTemplate.bind(this)}>
      <CarouselItemsDirective>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
      </CarouselItemsDirective>
    </CarouselComponent>
  </div>);
    }
}
ReactDom.render(<App />, document.getElementById("element"));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Carousel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
.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;
}
Copied to clipboard
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import * as React from "react";
import * as ReactDom from "react-dom";

class App extends React.Component<{}, {}> {
  public previousButtonTemplate(props: any): JSX.Element {
return (<ButtonComponent className="e-btn" cssClass="e-flat e-round" iconCss="e-icons e-chevron-left-double" />);
  }

  public nextButtonTemplate(props: any): JSX.Element {
return (<ButtonComponent className="e-btn" cssClass="e-flat e-round" iconCss="e-icons e-chevron-right-double" />);
  }

  public render() {
return (
  <div className='control-container'>
    <CarouselComponent previousButtonTemplate={this.previousButtonTemplate.bind(this)} nextButtonTemplate={this.nextButtonTemplate.bind(this)}>
      <CarouselItemsDirective>
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
      </CarouselItemsDirective>
    </CarouselComponent>
  </div>
);
  }
}

ReactDom.render(<App />, document.getElementById("element"));

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
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
import * as React from "react";
import * as ReactDom from "react-dom";
class App extends React.Component {
    render() {
        return (<div className='control-container'>
    <CarouselComponent showIndicators={true}>
      <CarouselItemsDirective>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
      </CarouselItemsDirective>
    </CarouselComponent>
  </div>);
    }
}
ReactDom.render(<App />, document.getElementById("element"));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Carousel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
.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;
}
Copied to clipboard
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
import * as React from "react";
import * as ReactDom from "react-dom";

class App extends React.Component<{}, {}> {
  public render() {
return (
  <div className='control-container'>
    <CarouselComponent showIndicators={true}>
      <CarouselItemsDirective>
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
      </CarouselItemsDirective>
    </CarouselComponent>
  </div>
);
  }
}

ReactDom.render(<App />, document.getElementById("element"));

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
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
import * as React from "react";
import * as ReactDom from "react-dom";
class App extends React.Component {
    indicatorTemplate(props) {
        return <div class="indicator" indicator-index={props.index}></div>;
    }
    render() {
        return (<div className='control-container'>
    <CarouselComponent indicatorsTemplate={this.indicatorTemplate.bind(this)}>
      <CarouselItemsDirective>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
      </CarouselItemsDirective>
    </CarouselComponent>
  </div>);
    }
}
ReactDom.render(<App />, document.getElementById("element"));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Carousel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
.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;
}
Copied to clipboard
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
import * as React from "react";
import * as ReactDom from "react-dom";

class App extends React.Component<{}, {}> {
  public indicatorTemplate(props: any): JSX.Element {
return <div class="indicator" indicator-index={props.index}></div>;
  }

  public render() {
return (
  <div className='control-container'>
    <CarouselComponent indicatorsTemplate={this.indicatorTemplate.bind(this)}>
      <CarouselItemsDirective>
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
      </CarouselItemsDirective>
    </CarouselComponent>
  </div>
);
  }
}

ReactDom.render(<App />, document.getElementById("element"));

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
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
import * as React from "react";
import * as ReactDom from "react-dom";
class App extends React.Component {
    getContent(index) {
        const slides = ["Slide 1", "Slide 2", "Slide 3", "Slide 4", "Slide 5"];
        return slides[index];
    }
    indicatorTemplate(props) {
        return (<div class="indicator" indicator-index={props.index}>
    <div class="preview-content">{this.getContent(props.index)}</div>
  </div>);
    }
    render() {
        return (<div className='control-container'>
    <CarouselComponent indicatorsTemplate={this.indicatorTemplate.bind(this)}>
      <CarouselItemsDirective>
        <CarouselItemDirective template="<div class='slide-content'>Slide 1</div>"/>
        <CarouselItemDirective template="<div class='slide-content'>Slide 2</div>"/>
        <CarouselItemDirective template="<div class='slide-content'>Slide 3</div>"/>
        <CarouselItemDirective template="<div class='slide-content'>Slide 4</div>"/>
        <CarouselItemDirective template="<div class='slide-content'>Slide 5</div>"/>
      </CarouselItemsDirective>
    </CarouselComponent>
  </div>);
    }
}
ReactDom.render(<App />, document.getElementById("element"));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Carousel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
.control-container {
  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: #adb5bd;
  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: #c1cdda;
}

.preview-content {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}
Copied to clipboard
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
import * as React from "react";
import * as ReactDom from "react-dom";

class App extends React.Component<{}, {}> {
  public getContent(index: number) {
const slides: string[] = ["Slide 1", "Slide 2", "Slide 3", "Slide 4", "Slide 5"];
return slides[index];
  }

  public indicatorTemplate(props: any): JSX.Element {
return (
  <div class="indicator" indicator-index={props.index}>
    <div class="preview-content">{this.getContent(props.index)}</div>
  </div>
);
  }

  public render() {
return (
  <div className='control-container'>
    <CarouselComponent indicatorsTemplate={this.indicatorTemplate.bind(this)}>
      <CarouselItemsDirective>
        <CarouselItemDirective template="<div class='slide-content'>Slide 1</div>" />
        <CarouselItemDirective template="<div class='slide-content'>Slide 2</div>" />
        <CarouselItemDirective template="<div class='slide-content'>Slide 3</div>" />
        <CarouselItemDirective template="<div class='slide-content'>Slide 4</div>" />
        <CarouselItemDirective template="<div class='slide-content'>Slide 5</div>" />
      </CarouselItemsDirective>
    </CarouselComponent>
  </div>
);
  }
}

ReactDom.render(<App />, document.getElementById("element"));

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
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
import * as React from "react";
import * as ReactDom from "react-dom";
class App extends React.Component {
    render() {
        return (<div className='control-container'>
    <CarouselComponent showPlayButton={true}>
      <CarouselItemsDirective>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
      </CarouselItemsDirective>
    </CarouselComponent>
  </div>);
    }
}
ReactDom.render(<App />, document.getElementById("element"));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Carousel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
.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;
}
Copied to clipboard
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
import * as React from "react";
import * as ReactDom from "react-dom";

class App extends React.Component<{}, {}> {
  public render() {
return (
  <div className='control-container'>
    <CarouselComponent showPlayButton={true}>
      <CarouselItemsDirective>
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
      </CarouselItemsDirective>
    </CarouselComponent>
  </div>
);
  }
}

ReactDom.render(<App />, document.getElementById("element"));

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
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import * as React from "react";
import * as ReactDom from "react-dom";
class App extends React.Component {
    btnClick() {
        let buttonObj = document.querySelector(".playBtn").ej2_instances[0];
        let carouselObj = document.querySelector(".e-carousel").ej2_instances[0];
        if (carouselObj.autoPlay) {
            buttonObj.content = "Play";
            carouselObj.autoPlay = false;
        }
        else {
            buttonObj.content = "Pause";
            carouselObj.autoPlay = true;
        }
    }
    playButtonTemplate(props) {
        return (<ButtonComponent className="e-btn" cssClass="e-info playBtn" content="Pause" onClick={this.btnClick.bind(this)}/>);
    }
    render() {
        return (<div className='control-container'>
    <CarouselComponent showPlayButton={true} playButtonTemplate={this.playButtonTemplate.bind(this)}>
      <CarouselItemsDirective>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
        <CarouselItemDirective 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>'/>
      </CarouselItemsDirective>
    </CarouselComponent>
  </div>);
    }
}
ReactDom.render(<App />, document.getElementById("element"));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Carousel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
.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;
}
Copied to clipboard
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import * as React from "react";
import * as ReactDom from "react-dom";

class App extends React.Component<{}, {}> {
  public btnClick(): void {
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;
}
  }

  public playButtonTemplate(props: any): JSX.Element {
return (<ButtonComponent className="e-btn" cssClass="e-info playBtn" content="Pause" onClick={this.btnClick.bind(this)} />);
  }

  public render() {
return (
  <div className='control-container'>
    <CarouselComponent showPlayButton={true} playButtonTemplate={this.playButtonTemplate.bind(this)}>
      <CarouselItemsDirective>
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
        <CarouselItemDirective 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>' />
      </CarouselItemsDirective>
    </CarouselComponent>
  </div>
);
  }
}

ReactDom.render(<App />, document.getElementById("element"));
Previous
Next