We will explore the Bootstrap 5 carousel, Its many properties to build a slideshow that cycles through multiple images, text, or custom HTML.
Building an image slider or carousel is a time taking process, especially from scratch. The best practice is to use a ready-made carousel library. It takes less time on top of that offers the better way to present valuable content to users.
Set up Vue Project
Install a brand new Vue project using the below command.
vue create vue-carouselGo inside the project folder.
cd vue-carouselNode.js Gatsby error – “digital envelope routines::unsupported …”
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 above error for invoking the app, make sure to update the "scripts": [] array in 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"
},Vue multi word error
To remove multi-word error warning, add the following code in vue.config.js file.
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
})
Run 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 install bootstrap-vue bootstrapOpen 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 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 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 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>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>