Getting Started with the Vue Carousel Component in Vue 2

25 Apr 20258 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion® Vue Carousel component.

To get start quickly with Vue Carousel, you can check on this video:

Prerequisites

System requirements for Syncfusion® Vue UI components

Dependencies

The following list of dependencies are required to use the Carousel component in your application.

|-- @syncfusion/ej2-vue-navigations
    |-- @syncfusion/ej2-vue-base
    |-- @syncfusion/ej2-navigations
        |-- @syncfusion/ej2-base
        |-- @syncfusion/ej2-buttons

Setting up the Vue 2 project

To generate a Vue 2 project using Vue-CLI, use the vue create command. Follow these steps to install Vue CLI and create a new project:

npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve

or

yarn global add @vue/cli
vue create quickstart
cd quickstart
yarn run serve

When creating a new project, choose the option Default ([Vue 2] babel, eslint) from the menu.

Vue 2 project

Once the quickstart project is set up with default settings, proceed to add Syncfusion® components to the project.

Add Syncfusion® Vue packages

Syncfusion® packages are available at npmjs.com. To use Vue components, install the required npm package.

This article uses the Vue Carousel component as an example. Install the @syncfusion/ej2-vue-navigations package by running the following command:

npm install @syncfusion/ej2-vue-navigations --save

or

yarn add @syncfusion/ej2-vue-navigations

Add Syncfusion® Vue component

Follow the below steps to add the Vue Carousel component:

1. First, import and register the Carousel component in the script section of the src/App.vue file.

<script>
import { CarouselComponent, CarouselItemDirective, CarouselItemsDirective } from "@syncfusion/ej2-vue-navigations";

export default {
  components: {
    'ejs-carousel': CarouselComponent,
    'e-carousel-item': CarouselItemDirective,
    'e-carousel-items': CarouselItemsDirective
  }
}
</script>

2. In the template section, define the Carousel component.

<template>
  <div class="control-container">
    <ejs-carousel>
      <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>

Here is the summarized code for the above steps in the src/App.vue file:

<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-item': CarouselItemDirective,
    'e-carousel-items': CarouselItemsDirective
  },
  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>

Run the project

To run the project, use the following command:

npm run serve

or

yarn run serve

NOTE

You can also explore our Vue Carousel example that shows you how to render the Carousel in Vue.