Use (Image Slider) Bootstrap Carousel With Vue.js

This page will guide you on how to integrate a image slider or bootstrap carousel with Vue.js app.

Image slider is a collection of slides or images that used to navigate automatically or manually to catch the end user’s attention.

So, it’s very important to choose a UI friendly + responsive image slider for your app.

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

So, let’s get started with integration of bootstrap carousel with Vue.js app.

1. Install Vue.js App With Bootstrap

Vue CLI will help us to install and set up Vue.js app along with basic scaffolding.

First of all, you can make sure that you’ve Vue CLI installed and up to date.

[js]
# Ensure vue-cli is installed and up to date
npm i -g vue-cli
[/js]

Now, let’s initialize a project with bootstrap vue.

[js]
vue init bootstrap-vue/webpack-simple my-project
[/js]

Note: If you’ve already app installed and set up, you can use below command to install bootstrap-vue in your existing app.

[js]
npm i bootstrap-vue bootstrap@4.0.0-beta.2
[/js]

2. Use Image Slider / bootstrap carousel with Vue.js

After installing bootstrap dependencies, we need to import the required components into our app to start using them.

So, let’s import bCarousel and b-carousel-slide components in your main.js

[js]
import bCarousel from ‘bootstrap-vue/es/components/carousel/carousel’;
import bCarouselSlide from ‘bootstrap-vue/es/components/carousel/carousel-slide’;
[/js]

Now, it’s important to call the components globally to use them throughout the app.

[js]
Vue.component(‘b-carousel’, bCarousel);
Vue.component(‘b-carousel-slide’, bCarouselSlide);
[/js]

Next, let’s add bootstrap CSS in the index.html file.

[js]
[/js]

Finally, add the sliders in your template to get rendered.

[html]

[/html]

That’s it, just run your app using following command.

[js]
npm run dev
[/js]

Finally, open your browser window @ https://www.thetechieshouse.com:8080.

Furthermore, following is the whole code for Vue.js carousel example that may help you.

[codegroup]
[js tab=”main.js”]
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//Import Vue
import Vue from ‘vue’
//Import app component
import App from ‘./App’
//Import router component
import router from ‘./router’
//Import carousel
import bCarousel from ‘bootstrap-vue/es/components/carousel/carousel’;
//Import slider
import bCarouselSlide from ‘bootstrap-vue/es/components/carousel/carousel-slide’;

Vue.component(‘b-carousel’, bCarousel);
Vue.component(‘b-carousel-slide’, bCarouselSlide);

/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
template: ‘‘,
components: { App }
})
[/js]
[html tab=”App.vue”]

[/html]
[html tab=”index.html”]

[/html]
[/codegroup]

If you’re looking to have some additional options for this carousel, you can visit Bootstrap carousel document.

Moreover, I hope, you loved this article and it helped you to integrate bootstrap carousel with Vue.js app.