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.

# 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 @ http://localhost: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.

Mohit Tanwani

Mohit Tanwani is an enthusiast Techie, a blogger, and IT geek. He has been crazily involved in the industry for 5 years.

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of