Vue 3 Bootstrap 5 Carousel Slider Working Functionality Example

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Vue 3 Bootstrap 5 Carousel Slider Working Functionality Example.

Guy’s here you can see more Vue 3 Bootstrap 5 working example:

1. Bootstrap 5 Popover working in Vue 3.
2. Bootstrap 5 Tooltip working in Vue 3.
3. Bootstrap5 Popup Modal with Forms in Vue 3.

Vue 3 and Bootstrap 5 came and if you are new then you must check below two links:

1. Vuejs
2. Bootstrap 5

Friends now I proceed onwards and here is the working code snippet and use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vue 3 setup and for this we need to run below commands . Secondly we should also have latest node version installed on our system. With below we will have  bootstrap 5.1.0 modules in our Vue 3 application:

npm install -g @vue/cli

vue create vueboot5

cd vueboot5

npm i bootstrap

npm i @popperjs/core

npm run serve //http://localhost:8080/

2. Now friends we need to add below code into src/App.vue file to check the final output on browser:

<template>
 <div class="container">
    <div class="row mt-5 mb-5">
      <div class="col-sm-12">
      <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://therichpost.com/wp-content/uploads/2021/10/Vue-3-Bootstrap-5-Carousel-Slider-Working-Functionaliy-Example.png" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="https://therichpost.com/wp-content/uploads/2021/10/Vue-3-Bootstrap-5-Carousel-Slider-Working-Functionaliy-Example.png" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="https://therichpost.com/wp-content/uploads/2021/10/Vue-3-Bootstrap-5-Carousel-Slider-Working-Functionaliy-Example.png" class="d-block w-100" alt="...">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
      </div>
      </div>
      </div>
</template>

<script>
//importing bootstrap 5
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import * as Bootstrap from 'bootstrap'
//import DemoComponent from "./components/DemoComponent.vue"
 
export default {
  
 mounted(){
    var myCarousel = document.querySelector('#myCarousel')
       new Bootstrap.Carousel(myCarousel)
 }
}
</script>

Now we are done friends  also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks