Vue Js Bootstrap Responsive Image Carousel Tutorial

Vue JS image carousel tutorial; In this guide, we will show you how to add a responsive image slider or carousel in the Vue js app using the profound Bootstrap and BootstrapVue packages.

Carousels offer an unusual way to display multiple pieces of content in a single or coveted space. The primary purpose of carousels is to show important content at an important position on the web application. This is used to grab the users’ attention or proliferate user engagement.

We loved the whimsical side of Vue, and this framework helps to amplify front-end development with the least efforts; you can use packages to deal with any feature.

To implement the image slider in vue, you will be given a profound demo from scratch. We will integrate the image carousel in vue and make sure to highlight all the instruction eloquently, which will be agile in nature.

How to Add Carousel or Image Slider in Vue Js

  • Step 1: Set Up Vue CLI
  • Step 2: Create Vue Project
  • Step 3: Add Vue Bootstrap Package
  • Step 4: Register External Packages
  • Step 5: Create Carousel Component
  • Step 6: Integrate Image Slider in Vue
  • Step 7: Start Vue App

Set Up Vue CLI

The foundation of agile vue development is laid on Vue CLI, thus install vue CLI to proliferate the vue carousel integration topic.

npm install -g @vue/cli

Create Vue Project

Next, type the command in command prompt to begin the installation of Vue app. Ignore this step, if project is already created.

vue create vue-cosmic-app
cd vue-cosmic-app

Add Vue Bootstrap Package

Next, head over to terminal, install bootstrap and bootstrap-vue packages altogether.

npm install bootstrap-vue bootstrap

# or

yarn add bootstrap-vue bootstrap

Register External Packages in Vue

After adding the libraries into the vue, make sure to register them globally, to take advantage of bootstrap fidelity, add the package in src/main.vue file.

import Vue from 'vue'
import App from './App.vue'

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

new Vue({
  render: h => h(App)
}).$mount('#app')

Create Carousel Component

Functionalities proliferate in vue based on component mechanism; additionally, components focus on the reusability of code.

Thus create a separate component for adding image slider in vue, create ImgCarousel.vue file in components folder, and add the below code in the file.

<template>
  <div>
    
  </div>
</template>

<script>
  export default {
    name: 'ImgCarousel',
    data(){
        return {
          
        }
    },
    methods:{

    }
  }
</script>

Register the component globally in src/App.vue file.

<template>
  <div class="container mt-4">
    <ImgCarousel />
  </div>
</template>

<script>

  import ImgCarousel from './components/ImgCarousel'

  export default {
    name: 'App',
    components: {
      ImgCarousel
    }
  }
</script>

Integrate Image Slider in Vue Component

The b-carousel directive is the prodigy that implements image slider in vue profoundly, and it comes with tons of methods and properties that help you customize eloquently.

You need to place the src/components/ImgCarousel.vue file.

<template>
  <div>
    <b-carousel
      controls
      indicators 
      v-model="slide"
      :interval="3500"
      background="#e1e1e1"
      img-width="1000"
      img-height="500"
      @sliding-end="endSlide"
      @sliding-start="initCarousel"
      style="text-shadow: 2px 3px 3px #222222;">
      
      <b-carousel-slide
        text="A journey of a thousands mile starts with a single step."
        img-src="https://picsum.photos/1000/500/?image=55"
        caption="The Alchemist">
      </b-carousel-slide>

      <b-carousel-slide img-src="https://picsum.photos/1000/500/?image=56">
        <h2>Love For All, Hatred For None</h2>
      </b-carousel-slide>

      <b-carousel-slide img-src="https://picsum.photos/1000/500/?image=57"></b-carousel-slide>

      <b-carousel-slide>
        <template v-slot:img>
          <img
            class="d-block img-fluid w-100"
            src="https://picsum.photos/1000/500/?image=55"
            width="1000"
            height="500"
            alt="Atomic Habits">
        </template>
      </b-carousel-slide>

      <b-carousel-slide caption="Life Quote" img-alt="Life Quote" img-blank>
        <p>The last mile is always the least crowded.</p>
      </b-carousel-slide>
    </b-carousel>
  </div>
</template>

<script>
  export default {
    name: 'ImgCarousel',
    data() {
      return {
        slide: 0,
        sliding: null
      }
    },
    methods: {
      initCarousel() {
        this.sliding = true
      },
      endSlide() {
        this.sliding = false
      }
    }
  }
</script>

Start Vue App

Start the vue app recklessly to hear the resonance of the feature we build; likewise invoke the app on the browser window with the given url.

npm run serve
http://localhost:8080

Vue Responsive Image Carousel

Conclusion

The vue carousel UI example is over; in this tutorial, we described what is image slider or carousel, why it is useful and most importantly, highlighted how to use the bootstrap library to create a vue carousel component. Besides, we shared the practical methods to implement responsive carousel in vue in an amply clean manner.

We showed adding multiple items in the vue carousel statically; however, you can dd dynamic images in the carousel using HTTP requests. So, that what we have for you the vue carousel tutorial is completed.