In the Carousel, slides can be rendered in two ways as follows,
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.
var carouselObj = new ej.navigations.Carousel({
items: [
{ template: '<div class="fs-5">Slide 1</div>' },
{ template: '<div class="fs-5">Slide 2</div>' },
{ template: '<div class="fs-5">Slide 3</div>' },
{ template: '<div class="fs-5">Slide 4</div>' },
{ template: '<div class="fs-5">Slide 5</div>' }
]
});
carouselObj.appendTo('#carousel');
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="Essential JS 2">
<meta name="author" content="Syncfusion">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet">
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdn.syncfusion.com/ej2/20.1.57/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="control-section">
<div class="control-container">
<div id="carousel"></div>
</div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
.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;
}
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.
var productItems = [
{ ID: 1, Title: 'Slide 1' },
{ ID: 2, Title: 'Slide 2' },
{ ID: 3, Title: 'Slide 3' },
{ ID: 4, Title: 'Slide 4' },
{ ID: 5, Title: 'Slide 5' }
];
var carouselObj = new ej.navigations.Carousel({
dataSource: productItems,
itemTemplate: '<div class="fs-5">${Title}</div>'
});
carouselObj.appendTo('#carousel');
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="Essential JS 2">
<meta name="author" content="Syncfusion">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet">
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdn.syncfusion.com/ej2/20.1.57/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="control-section">
<div class="control-container">
<div id="carousel"></div>
</div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
.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;
}
The Carousel items will be populated from the first index of the Carousel items and can be customized using the following ways,
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.
var carouselObj = new ej.navigations.Carousel({
items: [
{ template: '<div class="fs-5">Slide 1</div>' },
{ template: '<div class="fs-5">Slide 2</div>' },
{ template: '<div class="fs-5">Slide 3</div>' },
{ template: '<div class="fs-5">Slide 4</div>' },
{ template: '<div class="fs-5">Slide 5</div>' }
],
selectedIndex: 3
});
carouselObj.appendTo('#carousel');
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="Essential JS 2">
<meta name="author" content="Syncfusion">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet">
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdn.syncfusion.com/ej2/20.1.57/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="control-section">
<div class="control-container">
<div id="carousel"></div>
</div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
.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;
}
Using the prev
or next
public method of the Carousel component, you can switch the current populating slide to a previous or next slide.
var carouselObj = new ej.navigations.Carousel({
items: [
{ template: '<div class="fs-5">Slide 1</div>' },
{ template: '<div class="fs-5">Slide 2</div>' },
{ template: '<div class="fs-5">Slide 3</div>' },
{ template: '<div class="fs-5">Slide 4</div>' },
{ template: '<div class="fs-5">Slide 5</div>' }
]
});
carouselObj.appendTo('#carousel');
var prevButton = new ej.buttons.Button({ cssClass: 'e-info' });
prevButton.appendTo('#prev');
prevButton.element.onclick = (): void => {
carouselObj.prev();
};
var nextButton = new ej.buttons.Button({ cssClass: 'e-info' });
nextButton.appendTo('#next');
nextButton.element.onclick = (): void => {
carouselObj.next();
};
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="Essential JS 2">
<meta name="author" content="Syncfusion">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet">
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdn.syncfusion.com/ej2/20.1.57/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="control-section">
<div id="prev">Previous</div>
<div id="next">Next</div>
<div class="control-container">
<div id="carousel"></div>
</div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
.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;
}