Animations and transitions in Vue Carousel component
11 Jun 202424 minutes to read
Animations
Fade animation
In Carousel, two built-in animations are provided for slide transitions. You can disable animation using the animationEffect property. By default, Slide animation is applied for the transition between slides.
The following demo depicts the example for fade animation,
<template>
<div class="control-container">
<ejs-carousel animationEffect='Fade'>
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script setup>
import { CarouselComponent as EjsCarousel, CarouselItemsDirective as ECarouselItems, CarouselItemDirective as ECarouselItem } from '@syncfusion/ej2-vue-navigations';
</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>
<div class="control-container">
<ejs-carousel animationEffect='Fade'>
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import { CarouselComponent, CarouselItemDirective, CarouselItemsDirective } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-carousel": CarouselComponent,
"e-carousel-items": CarouselItemsDirective,
"e-carousel-item": CarouselItemDirective
}
};
</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>Custom animation
In Carousel, you can use customized animation effects for slide transitions using the Custom option of the animationEffect property and apply custom animation css via cssClass property.
The following demo depicts the example for parallax custom animation,
<template>
<div class="control-container">
<ejs-carousel animationEffect="Custom" cssClass="parallax">
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script setup>
import { CarouselComponent as EjsCarousel, CarouselItemsDirective as ECarouselItems, CarouselItemDirective as ECarouselItem } from '@syncfusion/ej2-vue-navigations';
</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>
<div class="control-container">
<ejs-carousel animationEffect="Custom" cssClass="parallax">
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import { CarouselComponent, CarouselItemDirective, CarouselItemsDirective } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-carousel": CarouselComponent,
"e-carousel-items": CarouselItemsDirective,
"e-carousel-item": CarouselItemDirective
}
};
</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>Intervals between slides
Using the items property, you can set different intervals for each item to transition between slides. The default interval is 5000 ms (5 seconds). The following example depicts the code for setting the different intervals between each item.
<template>
<div class="control-container">
<ejs-carousel>
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script setup>
import { CarouselComponent as EjsCarousel, CarouselItemsDirective as ECarouselItems, CarouselItemDirective as ECarouselItem } from '@syncfusion/ej2-vue-navigations';
</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>
<div class="control-container">
<ejs-carousel>
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import { CarouselComponent, CarouselItemDirective, CarouselItemsDirective } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-carousel": CarouselComponent,
"e-carousel-items": CarouselItemsDirective,
"e-carousel-item": CarouselItemDirective
},
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>Note: Interval property can accept value in terms of milliseconds.
Auto play slides
In the carousel, all slides transitions are performed continuously after the specified or default intervals. You can enable or disable the auto slide transition using the autoPlay property. The following example depicts the code to enable or disable the auto slide transitions.
<template>
<div class="control-container">
<ejs-carousel :autoPlay="true">
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script setup>
import { CarouselComponent as EjsCarousel, CarouselItemsDirective as ECarouselItems, CarouselItemDirective as ECarouselItem } from '@syncfusion/ej2-vue-navigations';
</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>
<div class="control-container">
<ejs-carousel :autoPlay="true">
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import { CarouselComponent, CarouselItemDirective, CarouselItemsDirective } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-carousel": CarouselComponent,
"e-carousel-items": CarouselItemsDirective,
"e-carousel-item": CarouselItemDirective
}
};
</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>Pause on hover
By default, Slide transitions are paused when hovering the mouse pointer over the Carousel element. You can enable or disable this functionality using the pauseOnHover property.
The following example depicts the code to play the slides when hovering the mouse pointer over the Carousel element.
<template>
<div class="control-container">
<ejs-carousel :pauseOnHover="false">
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script setup>
import { CarouselComponent as EjsCarousel, CarouselItemsDirective as ECarouselItems, CarouselItemDirective as ECarouselItem } from '@syncfusion/ej2-vue-navigations';
</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>
<div class="control-container">
<ejs-carousel :pauseOnHover="false">
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import { CarouselComponent, CarouselItemDirective, CarouselItemsDirective } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-carousel": CarouselComponent,
"e-carousel-items": CarouselItemsDirective,
"e-carousel-item": CarouselItemDirective
}
};
</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>Looping slides
In the carousel, slides transitions are repeated continuously when you reach the last slide by default. You can enable or disable the infinite slide transition using the loop property. The following example depicts the code to enable or disable the infinite slide transitions.
<template>
<div class="control-container">
<ejs-carousel :loop="true">
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script setup>
import { CarouselComponent as EjsCarousel, CarouselItemsDirective as ECarouselItems, CarouselItemDirective as ECarouselItem } from '@syncfusion/ej2-vue-navigations';
</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>
<div class="control-container">
<ejs-carousel :loop="true">
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import { CarouselComponent, CarouselItemDirective, CarouselItemsDirective } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-carousel": CarouselComponent,
"e-carousel-items": CarouselItemsDirective,
"e-carousel-item": CarouselItemDirective
}
};
</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>Slide changing events
Using the slideChanging or slideChanged events of the Carousel component, you can perform sample end customization while the carousel items are switched.
The following demo depicts the example for carousel events,
<template>
<div class="control-container">
<ejs-carousel :slideChanging="onSlideChanging" :slideChanged="onSlideChanged">
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script setup>
import { CarouselComponent as EjsCarousel, CarouselItemsDirective as ECarouselItems, CarouselItemDirective as ECarouselItem } from '@syncfusion/ej2-vue-navigations';
const onSlideChanging = (args) => {
console.log(args.currentSlide); // You can customize the slide before changing.
};
const onSlideChanged = (args) => {
console.log(args.currentSlide); // You can customize the slide after changed.
};
</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>
<div class="control-container">
<ejs-carousel :slideChanging="onSlideChanging" :slideChanged="onSlideChanged">
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import { CarouselComponent, CarouselItemDirective, CarouselItemsDirective } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-carousel": CarouselComponent,
"e-carousel-items": CarouselItemsDirective,
"e-carousel-item": CarouselItemDirective
},
methods: {
onSlideChanging: function (args) {
console.log(args.currentSlide); // You can customize the slide before changing.
},
onSlideChanged: function (args) {
console.log(args.currentSlide); // You can customize the slide after changed.
},
},
};
</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>Disable touch swiping
In the carousel, you can swipe the carousel slides using touch actions by default. The swipe action can be enabled or disabled using the enableTouchSwipe property. The following example depicts the code to disable the swipe action for the slide.
<template>
<div class="control-container">
<ejs-carousel :enableTouchSwipe="false">
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script setup>
import { CarouselComponent as EjsCarousel, CarouselItemsDirective as ECarouselItems, CarouselItemDirective as ECarouselItem } from '@syncfusion/ej2-vue-navigations';
</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>
<div class="control-container">
<ejs-carousel :enableTouchSwipe="false">
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import { CarouselComponent, CarouselItemDirective, CarouselItemsDirective } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-carousel": CarouselComponent,
"e-carousel-items": CarouselItemsDirective,
"e-carousel-item": CarouselItemDirective
},
};
</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>Swipe Modes
In the carousel, the swipeMode property allows specifying whether the slide transition should occur while performing swiping via touch or mouse. The slide swiping is enabled or disabled using the bitwise operator.
The following are the different swipe modes available in the carousel:
- CarouselSwipeMode.Touch - Allows the user to slide the slides using touch actions.
- CarouselSwipeMode.Mouse - Allows the user to slide the slides using mouse actions.
- CarouselSwipeMode.Touch & CarouselSwipeMode.Mouse - Allows the user to slide the slides using both touch and mouse actions.
- ~CarouselSwipeMode.Touch & ~CarouselSwipeMode.Mouse - Disables both touch and mouse actions.
<template>
<div class="control-container">
<ejs-carousel :swipeMode=swipeModes>
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script setup>
import { CarouselSwipeMode } from "@syncfusion/ej2-vue-navigations";
import { CarouselComponent as EjsCarousel, CarouselItemsDirective as ECarouselItems, CarouselItemDirective as ECarouselItem } from '@syncfusion/ej2-vue-navigations';
const swipeModes = CarouselSwipeMode.Touch & CarouselSwipeMode.Mouse;
</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>
<div class="control-container">
<ejs-carousel :swipeMode=swipeModes>
<e-carousel-items>
<e-carousel-item template="Cardinal"></e-carousel-item>
<template v-slot:Cardinal>
<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>
</template>
<e-carousel-item template="kingfisher"></e-carousel-item>
<template v-slot:kingfisher>
<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>
</template>
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
<template v-slot:keel-billed-toucan>
<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>
</template>
<e-carousel-item template="yellow-warbler"></e-carousel-item>
<template v-slot:yellow-warbler>
<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>
</template>
<e-carousel-item template="bee-eater"></e-carousel-item>
<template v-slot:bee-eater>
<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>
</template>
</e-carousel-items>
</ejs-carousel>
</div>
</template>
<script>
import { CarouselComponent, CarouselSwipeMode } from "@syncfusion/ej2-vue-navigations";
import { CarouselItemDirective, CarouselItemsDirective } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-carousel": CarouselComponent,
"e-carousel-items": CarouselItemsDirective,
"e-carousel-item": CarouselItemDirective
},
data: function () {
return {
swipeModes: CarouselSwipeMode.Touch & CarouselSwipeMode.Mouse
};
}
};
</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>