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

Populating Items in React Carousel component

08 Dec 2022 / 6 minutes to read

In the Carousel, slides can be rendered in two ways as follows,

  • Populating items using carousel item
  • Populating Items using data source

When rendering the Carousel component using items binding, you can assign templates for each item separately or assign a common template to each item. You can also customize the slide transition interval for each item separately. The following example code depicts the functionality as item property binding.

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>
      <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.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/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>
      <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"));

Populating Items using data source

When rendering the Carousel component using data binding, you can assign a common template only for all items using the itemTemplate property. You cannot set the interval for each item. The following example code depicts the functionality as data binding.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { CarouselComponent } 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.productItems = [
            { ID: 1, Name: "Cardinal", imageName: 'cardinal' },
            { ID: 2, Name: "Kingfisher", imageName: 'hunei' },
            { ID: 3, Name: "Keel-billed-toucan", imageName: 'costa-rica' },
            { ID: 4, Name: "Yellow-warbler", imageName: 'kaohsiung' },
            { ID: 5, Name: "Bee-eater", imageName: 'bee-eater' }
        ];
    }
    itemTemplate(props) {
        return <figure className="img-container"><img src={"https://ej2.syncfusion.com/products/images/carousel/" + props.imageName + ".png"} alt={props.Name} style={{ height: "100%", width: "100%" }}/><figcaption className="img-caption">{props.Name}</figcaption></figure>;
    }
    render() {
        return (<div className='control-container'>
    <CarouselComponent dataSource={this.productItems} itemTemplate={this.itemTemplate.bind(this)}></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.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/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 } from "@syncfusion/ej2-react-navigations";
import * as React from "react";
import * as ReactDom from "react-dom";

class App extends React.Component<{}, {}> {
  public itemTemplate(props: any): JSX.Element {
return <figure className="img-container"><img src={"https://ej2.syncfusion.com/products/images/carousel/" + props.imageName + ".png"} alt={props.Name} style={{height:"100%",width:"100%"}} /><figcaption className="img-caption">{props.Name}</figcaption></figure>;
  }

  public productItems: Record<string, string | number>[] = [
{ ID: 1, Name: "Cardinal", imageName: 'cardinal' },
{ ID: 2, Name: "Kingfisher", imageName: 'hunei' },
{ ID: 3, Name: "Keel-billed-toucan", imageName: 'costa-rica' },
{ ID: 4, Name: "Yellow-warbler", imageName: 'kaohsiung' },
{ ID: 5, Name: "Bee-eater", imageName: 'bee-eater' }
  ];

  public render() {
return (
  <div className='control-container'>
    <CarouselComponent dataSource={this.productItems} itemTemplate={this.itemTemplate.bind(this)}></CarouselComponent>
  </div>
);
  }
}

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

Selection

The Carousel items will be populated from the first index of the Carousel items and can be customized using the following ways,

  • Select an item using the property.
  • Select an item using the method.

Select an item using the property

Using the selectedIndex property of the Carousel component, you can set the slide to be populated at the time of initial rendering else you can switch to the particular slide item.

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 selectedIndex={3}>
      <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.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/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 selectedIndex={3}>
      <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"));

Select an item using the method

Using the prev or next public method of the Carousel component, you can switch the current populating slide to a previous or next slide.

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 {
    prevBtnClick() {
        let carouselObj = document.querySelector(".e-carousel").ej2_instances[0];
        carouselObj.prev();
    }
    nextBtnClick() {
        let carouselObj = document.querySelector(".e-carousel").ej2_instances[0];
        carouselObj.next();
    }
    render() {
        return (<div>
    <ButtonComponent className="e-btn" cssClass="e-info" onClick={this.prevBtnClick.bind(this)}>Previous</ButtonComponent>
    <ButtonComponent className="e-btn" cssClass="e-info" onClick={this.nextBtnClick.bind(this)}>Next</ButtonComponent>
    <div className='control-container'>
      <CarouselComponent>
        <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>
  </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.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/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 prevBtnClick(): void {
let carouselObj = (document.querySelector(".e-carousel") as any).ej2_instances[0];
carouselObj.prev();
  }

  public nextBtnClick(): void {
let carouselObj = (document.querySelector(".e-carousel") as any).ej2_instances[0];
carouselObj.next();
  }

  public render() {
return (
  <div>
    <ButtonComponent className="e-btn" cssClass="e-info" onClick={this.prevBtnClick.bind(this)}>Previous</ButtonComponent>
    <ButtonComponent className="e-btn" cssClass="e-info" onClick={this.nextBtnClick.bind(this)}>Next</ButtonComponent>
    <div className='control-container'>
      <CarouselComponent>
        <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>
  </div>
);
  }
}

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

Partial visible slides

The Carousel component supports to show one complete slide and a partial view of adjacent (previous and next) slides at the same time. You can enable or disable the partial slides using the partialVisible property.

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 partialVisible={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.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/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: #e5e5e5;
    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 partialVisible={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"));

Slide animation only applicable if the partialVisible is enabled.

The last slide will be displayed as a partial slide at the initial rendering when the loop and partialVisible properties are enabled.

The previous slide is not displayed at the initial rendering when the loop is disabled.

The following example code depicts the functionality of partialVisible and without loop functionalities.

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 partialVisible={true} loop={false}>
      <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.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/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: #e5e5e5;
    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 partialVisible={true} loop={false}>
      <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"));

See Also

Previous
Next