Build Responsive Carousel in Vue Js with BootstrapVue
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 3 app.
Install a brand new Vue project using the below command.
vue create vue-carouselGo inside the project folder.
cd vue-carouselRun the app in the user’s browser.
npm run serveInstall & Configure Bootstrap Plugins
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>