Build Responsive Carousel in Vue.Js with BootstrapVue

Last updated on by Digamber
This is a step by step tutorial on how to integrate responsive carousel or image slider in Vue.js app using BootstraVue plugin.

With the help of this article, we will learn how to install the Vue app from scratch using Vue CLI, how to install bootstrap-vue packages and configure in Vue quickly. We will explore the Bootstrap 4 carousel and Its various properties to build a slideshow that cycles through multiple images, text, or custom HTML.

Carousel is also known as image slider, its a collection of images, text or custom markup. The content can be easily be scanned by the User with the help of a carousel.

Building an image slider or carousel is a time taking process, especially when you create it from scratch. So, the best practice is to use a ready-made carousel library. It takes less time or offers you the better way to present your valuable content to your User.

Set up Vue Project

We are going to take the help of the Bootstrap carousel via the BootstrapVue plugin in Vue project. It is no doubt the best User-friendly library to build a responsive image slider for the Vue app.

Bootstrap carousel is a native bootstrap component provided by BootstrapVue to integrate with your Vue.js apps.

So, let’s start implementing the bootstrap carousel in the Vue.js 2+ app.

Install a brand new Vue project using the below command.

vue create vue-carousel

Go inside the project folder.

cd vue-carousel

Run the app in the user’s browser.

npm run serve

Install & Configure Vuetify Plugin

We can install bootstrap-vue in Vue using npm or yarn. We need to install Bootstrap and bootstrap-vue together.

# NPM
npm install bootstrap-vue bootstrap --save

# Yarn
yarn add bootstrap-vue bootstrap

Open main.js file and import the following libraries bootstrap services.

import Vue from 'vue'
import App from './App.vue'

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


// Install BootstrapVue
Vue.use(BootstrapVue)

// Install BootstrapVue icon
Vue.use(IconsPlugin)


new Vue({
  render: h => h(App)
}).$mount('#app')

We can get the following UI components to create a useful layout via vue-bootstrap package. It includes following Bootstrap 4 user-interface components such as: Carousel, Card, Collapse, Dropdown, Forms, Jumbotron, Alert, Badge, Breadcrumb, Button, Button group, List group, Modal, Nav, Navbar, Pagination, Popover, Progress, Tabs and Table.

Check out the full list of Bootstrap 4 components in their official website here.

Adding Responsive Bootstrap Carousel in Vue.js

We are all set with basic configuration now we will learn to implement Image Slider or bootstrap carousel in Vue.js. Open your vue template and add the following code.

<template>
  <div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="3000"
      controls
      indicators
      background="#ccc"
      img-width="1024"
      img-height="480"
      style="text-shadow: 1px 1px 2px #000;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <!-- Text slides with image -->
      <b-carousel-slide
        caption="First slide"
        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
        img-src="https://picsum.photos/1024/480/?image=52"
      ></b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
        <h1>Hello world!</h1>
      </b-carousel-slide>

      <!-- Slides with image only -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>

      <!-- Slides with img slot -->
      <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
      <b-carousel-slide>
        <template v-slot:img>
          <img
            class="d-block img-fluid w-100"
            width="1024"
            height="480"
            src="https://picsum.photos/1024/480/?image=55"
            alt="image slot"
          >
        </template>
      </b-carousel-slide>

      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>
    </b-carousel>

    <p class="mt-4">
      Slide #: {{ slide }}<br>
      Sliding: {{ sliding }}
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        slide: 0,
        sliding: null
      }
    },
    methods: {
      onSlideStart() {
        this.sliding = true
      },
      onSlideEnd() {
        this.sliding = false
      }
    }
  }
</script>

Let us understand carousel props.

We set the sliding-start event, and this event works when the image slider is triggered. The sliding-end event emits when transitioning to a new slide ends.

The carousel can be styled using style prop, and we can even manage the carousel or image slider’s width and height using img-width and img-height properties.

To set the delay duration between sides use. the interval prop in milliseconds.

We can activate the previous and next controls using controls prop.

The indicators prop enable the indicator buttons for directly going to particular slide.

Adding Animation in Carousel

By default, bootstrap carousel comes with a sliding animation. However, we can change the image slider animation to cross-fade animation, and it can be done by just adding fade property in b-carousel component.

<template>
  <div>
    <b-carousel
      id="carousel-1"
      fade
      v-model="slide"
      :interval="4000"
      controls
      indicators
      background="#ababab"
      img-width="1024"
      img-height="480"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <!-- Text slides with image -->
      <b-carousel-slide
        caption="First slide"
        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
        img-src="https://picsum.photos/1024/480/?image=52"
      ></b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
        <h1>Hello world!</h1>
      </b-carousel-slide>

      <!-- Slides with image only -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>

      <!-- Slides with img slot -->
      <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
      <b-carousel-slide>
        <template v-slot:img>
          <img
            class="d-block img-fluid w-100"
            width="1024"
            height="480"
            src="https://picsum.photos/1024/480/?image=55"
            alt="image slot"
          >
        </template>
      </b-carousel-slide>

      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>
    </b-carousel>

    <p class="mt-4">
      Slide #: {{ slide }}<br>
      Sliding: {{ sliding }}
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        slide: 0,
        sliding: null
      }
    },
    methods: {
      onSlideStart() {
        this.sliding = true
      },
      onSlideEnd() {
        this.sliding = false
      }
    }
  }
</script>

How to Disable Animation?

Disabling animation is very easy with bootstrap-vue plugin. Add no-animation prop in b-carousel component to disable slide animation.

<template>
   <b-carousel
      id="carousel-1"
      no-animation
      v-model="slide"
      :interval="3000"
      background="#ababab"
      img-width="1024"
      img-height="480"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd">
   </b-carousel>
</template>