How to create Vue 3 Carousel using vue3-carousel package

Carousels are a great way to showcase important information on your website. While you can create a carousel using normal HTML and CSS, it seems like re-inventing the wheel. You can create a Vue3 Carousel very easily using the vue3-carousel package.

In this post, we will look at the various options available in the vue3-carousel package.

1 – Installation

The first step is to install the vue3-carousel package in your VueJS project.

$ npm install vue3-carousel

In case you are using yarn, use the below command.

$ yarn add vue3-carousel

Once the installation is complete, we can start using the same.

2 – Basic Vue 3 Carousel Implementation

Let us first perform a very basic carousel implementation.

Below is the script part of your component.

<script setup>
import 'vue3-carousel/dist/carousel.css'
import { Carousel, Slide, Navigation } from 'vue3-carousel'

const slides = [
  { id: '1', title: 'Vue 3 Introduction', content: 'VueJS is a library' },
  { id: '2', title: 'Vue 3 Components', content: 'Know the components' },
  { id: '3', title: 'Vue 3 Conditional', content: 'Rendering Conditionally' },
  { id: '4', title: 'Vue 3 Reactivity', content: 'VueJS is Reactive' },
  { id: '5', title: 'Vue 3 Compute', content: 'VueJS uses computed properties' },
]

</script>

As you can see, we import a special CSS file available as part of the vue3-carousel package. Also, we import some packages that help us create a carousel.

Lastly, we have an array of objects by the name slides. Basically, this is the content of the carousel. For the demo, we have hard-coded the data. However, this can also come from an external source like a file or an API call.

Note that this example uses the Vue 3 Composition API approach. However, the same approach will also apply to Options API.

Below is the HTML and CSS part of the component.

<template>
  <Carousel>
    <Slide v-for="slide in slides" :key="slide.id">
      <div class="carousel__item">
        <h3>{{ slide.title }}</h3>
        <p>{{ slide.content }}</p>
      </div>
    </Slide>

    <template #addons>
      <Navigation />
    </template>
  </Carousel>
</template>

<style>
.carousel__item {
  min-height: 200px;
  width: 100%;
  background-color: var(--vc-clr-primary);
  color: var(--vc-clr-white);
  font-size: 20px;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
}

.carousel__slide {
  padding: 10px;
}

.carousel__prev,
.carousel__next {
  box-sizing: content-box;
  border: 5px solid white;
}

</style>

The <Carousel> component wraps the entire component code. Also, the <Slide> component is repeated using the v-for directive. You can read more about it in this detailed post on using v-for directive in VueJS.

For every slide in the slides array, we have a div with the content of the slide object. Lastly, we have the addons section where we use the Navigation and Pagination components. See below screenshot for the final carousel.

The Navigation component enables the left and right arrows for moving the slides. See below screenshot:

3 – Vue 3 Carousel Pagination

To enable pagination, we have to first import the Pagination component from vue3-carousel package.

<script setup>
import 'vue3-carousel/dist/carousel.css'
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'

const slides = [
  { id: '1', title: 'Vue 3 Introduction', content: 'VueJS is a library' },
  { id: '2', title: 'Vue 3 Components', content: 'Know the components' },
  { id: '3', title: 'Vue 3 Conditional', content: 'Rendering Conditionally' },
  { id: '4', title: 'Vue 3 Reactivity', content: 'VueJS is Reactive' },
  { id: '5', title: 'Vue 3 Compute', content: 'VueJS uses computed properties' },
]

</script>

Then, we need to use the component within our template.

<template>
  <Carousel>
    <Slide v-for="slide in slides" :key="slide.id">
      <div class="carousel__item">
        <h3>{{ slide.title }}</h3>
        <p>{{ slide.content }}</p>
      </div>
    </Slide>

    <template #addons>
      <Navigation />
      <Pagination />
    </template>
  </Carousel>
</template>

This will add the pagination feature at the bottom of our carousel. See below screenshot.

4 – Enabling Wrap-Around Carousel

We can also enable wrap-around feature in our Carousel for rotating navigation from first item to last and then, starting with the first item again.

<template>
  <Carousel :wrap-around="true">
    <Slide v-for="slide in slides" :key="slide.id">
      <div class="carousel__item">
        <h3>{{ slide.title }}</h3>
        <p>{{ slide.content }}</p>
      </div>
    </Slide>

    <template #addons>
      <Navigation />
      <Pagination />
    </template>
  </Carousel>
</template>

Basically, we set the wrap-around property to true. Note that we set the property on the Carousel component.

5 – Introducing Breakpoints in Vue 3 Carousel

Many times, we want to introduce breakpoints in our Carousel. For example, we may want to display only two slide items at a time.

The vue3-carousel package allows us to add a breakpoint object to configure the same.

To get is working, we first define the breakpoint object.

const breakpoints = {
  // 700px and up
  700: {
    itemsToShow: 2,
    snapAlign: 'center',
  },
  // 1024 and up
  1024: {
    itemsToShow: 2,
    snapAlign: 'start',
  },
}

Here, we can specify different configuration for different device resolutions. The itemsToShow property dictates the number of slides to be shown at a time.

Then, we introduce the breakpoints property to the Carousel component. See below snippet.

<template>
  <Carousel :wrap-around="true" :breakpoints="breakpoints">
    <Slide v-for="slide in slides" :key="slide.id">
      <div class="carousel__item">
        <h3>{{ slide.title }}</h3>
        <p>{{ slide.content }}</p>
      </div>
    </Slide>

    <template #addons>
      <Navigation />
      <Pagination />
    </template>
  </Carousel>
</template>

Once we start the application, we should be able to see the carousel as below:

6 – Hiding the Navigation Arrows in Carousel

We can also hide the navigation arrow in our Carousel in case there is no further slide.

This can be easily achieved by adding the CSS class as below:

.carousel__prev--in-active,
.carousel__next--in-active {
  display: none;
}

Note that the hiding the navigation arrows does not work when wrap-around is set to true. Therefore, we need to remove the wrap-around property in case we want to enable hidden arrows feature. The choice depends on your user-interface requirements.

7 – Vue 3 Carousel Autoplay Option

Another useful feature provided by vue3-carousel package is the Autoplay feature. You may have seen many websites with a constantly revolving carousel of images showing important information.

We can accomplish the same using autoplay feature. See below example:

<template>
  <Carousel :wrap-around="true" :breakpoints="breakpoints" :autoplay="2000">
    <Slide v-for="slide in slides" :key="slide.id">
      <div class="carousel__item">
        <h3>{{ slide.title }}</h3>
        <p>{{ slide.content }}</p>
      </div>
    </Slide>

    <template #addons>
      <Navigation />
      <Pagination />
    </template>
  </Carousel>
</template>

The autoplay property takes the time duration in milliseconds as input. In the above example, we have set the time for each slide to 2000 milliseconds or 2 seconds.

Conclusion

The vue3-carousel package provides a bunch of options that can help us implement a Carousel in VueJS with great ease.

In my view, we should prefer to use the package unless we have very specific customization needs.

You can play around with the Vue 3 Carousel demo on Stackblitz.

Want to explore more VueJS features? Check out this post on implementing Vue 3 Watchers with Composition API.

If you have any comments or queries about this post, please feel free to mention them in the comments section below.