Vue 2 Tutorial- How To Build Responsive Carousel In Vue 2 With BootstrapVue

This is a step-by-step tutorial on how to integrate a responsive carousel or image slider in the Vue.js app using the BootstrapVue plugin.

In this Vue 2 guide, we will get to learn how to install the Vue app from scratch using the vue CLI, and how to install bootstrap-vue packages and configure in Vue quickly.

In addition, we will explore the Bootstrap 5 carousel and its various properties to build a slideshow that cycles through multiple images, texts, or custom HTML.

 

The best practice is to use a ready-made carousel library for building an image slider or carousel. It takes less time.

 

Let’s now see the steps to be followed:

Step 1- Set Up Vue Project

Step 2- Vue Multi-Word Error

Step 3- Install & Configure The Bootstrap Plugins

Step 4- Adding Responsive The Bootstrap Carousel In Vue.js

Step 5- Adding Animation In Carousel

Step 6- How To Disable Animation

Step 7- Conclusion

 

Step 1- Set Up Vue Project

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

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

For implementing the Bootstrap carousel in the Vue app, we have to install new Vue project using the given command:

vue create vue-carousel

Then, we go inside the project folder:

cd vue-carousel

 

Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

To remove the above error for invoking the app, we have to make sure to update the “scripts”: [] array in the package.json file:

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

 

Step 2-  Vue Multi-word Error

To remove the multi-word error warning, we will add the following code in the vue.config.js file:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
})

Further, we will run the app in the user’s browser:

npm run serve

 

Step 3- Install & Configure The Bootstrap Plugins

In this step, we will learn how to install bootstrap-vue in Vue using npm or yarn. We need to install the Bootstrap and bootstrap-vue together:

npm install bootstrap-vue bootstrap

Then, we will open the 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 the vue-bootstrap package.

It includes the 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
  • Table

 

Step 4- Adding Responsive The Bootstrap Carousel In Vue.js

We are all set with the basic configuration. Now, we will learn to implement Image Slider or Bootstrap Carousel in Vue.js.

Afterward, we will open the components/HelloWorld.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>

Now, we will understand the 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 end.

The carousel can be styled using the style prop and we can even manage the carousel or image slider’s width and height using the 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 the controls prop.

The indicators prop enables the indicator buttons to directly go to a particular slide.

 

Step 5- Adding Animation To Carousel

By default, the 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 the fade property in the 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>

 

Step 6- How To Disable Animation

Disabling the animation is quite smooth with the bootstrap-vue plugin. We just have to add a no-animation prop in the 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>

 

Conclusion

So, in this Vue 2 tutorial, we have learned how to build a responsive carousel in Vue 2 with BootstrapVue. Hope that you all found the steps quite easy to follow.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *