The navigators and indicators are used to transition the slides manually.
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.
<template>
<div class="control-container">
<ejs-carousel buttonsVisibility="Visible">
<e-carousel-items>
<e-carousel-item 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"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import Vue from "vue";
import { CarouselPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(CarouselPlugin);
export default {
data: function () {
return {};
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
.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;
}
</style>
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.
<template>
<div class="control-container">
<ejs-carousel buttonsVisibility="VisibleOnHover">
<e-carousel-items>
<e-carousel-item 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"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import Vue from "vue";
import { CarouselPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(CarouselPlugin);
export default {
data: function () {
return {};
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
.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;
}
</style>
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.
<template>
<div class="control-container">
<ejs-carousel :previousButtonTemplate="previousTemplate" :nextButtonTemplate="nextTemplate">
<e-carousel-items>
<e-carousel-item 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"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import Vue from "vue";
import { CarouselPlugin } from "@syncfusion/ej2-vue-navigations";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Vue.use(CarouselPlugin);
var previousVue = Vue.component("previousButton", {
template: `<ejs-button cssClass="e-flat e-round" iconCss="e-icons e-chevron-left-double"></ejs-button>`,
data() {
return {
data: {},
};
},
computed: {},
methods: {},
});
var nextVue = Vue.component("nextButton", {
template: `<ejs-button cssClass="e-flat e-round" iconCss="e-icons e-chevron-right-double"></ejs-button>`,
data() {
return {
data: {},
};
},
computed: {},
methods: {},
});
export default {
data: function () {
return {
previousTemplate: function () {
return {
template: previousVue,
};
},
nextTemplate: function () {
return {
template: nextVue,
};
},
};
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
.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;
}
</style>
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.
<template>
<div class="control-container">
<ejs-carousel :showIndicators="true">
<e-carousel-items>
<e-carousel-item 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"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import Vue from "vue";
import { CarouselPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(CarouselPlugin);
export default {
data: function () {
return {};
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
.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;
}
</style>
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.
<template>
<div class="control-container">
<ejs-carousel :indicatorsTemplate="indicatorsTemplate">
<e-carousel-items>
<e-carousel-item 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"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import Vue from 'vue';
import { CarouselPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(ButtonPlugin);
Vue.use(CarouselPlugin);
var indicatorsVue = Vue.component("indicators", {
template: `<div class="indicator" indicator-index="{data.index}">
</div>`,
data() {
return {};
},
computed: {},
methods: {},
},
});
export default {
data: function() {
return {
indicatorsTemplate: function () {
return {
template: indicatorsVue,
};
},
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
.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;
}
</style>
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.
<template>
<div class="control-container">
<ejs-carousel :indicatorsTemplate="indicatorsTemplate">
<e-carousel-items>
<e-carousel-item template="<div class='slide-content'>Slide 1</div>"></e-carousel-item>
<e-carousel-item template="<div class='slide-content'>Slide 2</div>"></e-carousel-item>
<e-carousel-item template="<div class='slide-content'>Slide 3</div>"></e-carousel-item>
<e-carousel-item template="<div class='slide-content'>Slide 4</div>"></e-carousel-item>
<e-carousel-item template="<div class='slide-content'>Slide 5</div>"></e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import Vue from "vue";
import { CarouselPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(ButtonPlugin);
Vue.use(CarouselPlugin);
var indicatorsVue = Vue.component("indicators", {
template: `<div class="indicator" indicator-index="{data.index}">
<div class="preview-content">{{getContent(data.index)}}</div>
</div>`,
data() {
return {};
},
computed: {},
methods: {
getContent: function (index) {
var slides = ["Slide 1", "Slide 2", "Slide 3", "Slide 4", "Slide 5"];
return slides[index];
},
},
});
export default {
data: function () {
return {
indicatorsTemplate: function () {
return {
template: indicatorsVue,
};
},
};
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
.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: #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;
}
</style>
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.
<template>
<div class="control-container">
<ejs-carousel :showPlayButton="true">
<e-carousel-items>
<e-carousel-item 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"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import Vue from "vue";
import { CarouselPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(CarouselPlugin);
export default {
data: function () {
return {};
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
.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;
}
</style>
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.
<template>
<div class="control-container">
<ejs-carousel :previousButtonTemplate="previousTemplate" :nextButtonTemplate="nextTemplate">
<e-carousel-items>
<e-carousel-item 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"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
<e-carousel-item 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>"></e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import Vue from "vue";
import { CarouselPlugin } from "@syncfusion/ej2-vue-navigations";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Vue.use(CarouselPlugin);
var playVue = Vue.component("nextButton", {
template: `<ejs-button cssClass="e-info playBtn" content="Pause" v-on:click.native="btnClick"></ejs-button>`,
data() {
return {
data: {},
};
},
computed: {},
methods: {},
});
export default {
data: function () {
return {
playButtonTemplate: function () {
return {
template: playVue,
};
},
};
},
methods: {
btnClick: function (event) {
var buttonObj = document.querySelector(".playBtn").ej2_instances[0];
var carouselObj = document.querySelector(".e-carousel").ej2_instances[0];
if (carouselObj.autoPlay) {
buttonObj.content = "Play";
carouselObj.autoPlay = false;
} else {
buttonObj.content = "Pause";
carouselObj.autoPlay = true;
}
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
.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;
}
</style>