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.
# Ensure vue-cli is installed and up to date npm i -g vue-cli
Now, let’s initialize a project with bootstrap vue.
vue init bootstrap-vue/webpack-simple my-project
Note: If you’ve already app installed and set up, you can use below command to install bootstrap-vue in your existing app.
npm i bootstrap-vue bootstrap@4.0.0-beta.2
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
import bCarousel from 'bootstrap-vue/es/components/carousel/carousel'; import bCarouselSlide from 'bootstrap-vue/es/components/carousel/carousel-slide';
Now, it’s important to call the components globally to use them throughout the app.
Vue.component('b-carousel', bCarousel);
Vue.component('b-carousel-slide', bCarouselSlide);
Next, let’s add bootstrap CSS in the index.html file.
<!-- Add this to <head> --> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/>
Finally, add the sliders in your template to get rendered.
<template>
<div>
<b-carousel id="carousel1"
style="text-shadow: 1px 1px 2px #333;"
controls
indicators
background="#ababab"
:interval="4000"
img-width="1024"
img-height="480"
v-model="slide"
@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://lorempixel.com/1024/480/technics/2/"
></b-carousel-slide>
<b-carousel-slide img-src="https://lorempixel.com/1024/480/technics/8/">
</b-carousel-slide>
</b-carousel>
<p class="mt-4">
Slide #: {{ slide }}<br>
Sliding: {{ sliding }}
</p>
</div>
</template>
That’s it, just run your app using following command.
npm run dev
Finally, open your browser window @ https://www.thetechieshouse.com:8080.
Suggested: Learn More On Vue.js Bootstrap 4 Components Integration
Furthermore, following is the whole code for Vue.js carousel example that may help you.
// 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: '<App/>',
components: { App }
})
<template>
<div id="app">
<p class="my-4">Hello from Image Slider / Bootstrap Carousel With Vue.js App!</p>
</b-modal>
<b-carousel id="carousel1"
style="text-shadow: 1px 1px 2px #333;"
controls
indicators
background="#ababab"
:interval="4000"
img-width="1024"
img-height="480"
v-model="slide"
@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://lorempixel.com/1024/480/technics/2/"
></b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide img-src="https://lorempixel.com/1024/480/technics/4/">
<h1>Hello world!</h1>
</b-carousel-slide>
<!-- Slides with image only -->
<b-carousel-slide img-src="https://lorempixel.com/1024/480/technics/8/">
</b-carousel-slide>
<!-- Slides with img slot -->
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
<b-carousel-slide>
<img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
src="https://lorempixel.com/1024/480/technics/5/" alt="image slot">
</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 {
name: 'app',
data () {
return {
slide: 0,
sliding: null
}
},
methods: {
onSlideStart (slide) {
this.sliding = true
},
onSlideEnd (slide) {
this.sliding = false
}
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/>
<title>setup-vuejs</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
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.
Leave a Reply