How to change the value of data-bs-slide-to dynamically bootstrap 5 and vue js 2

Question

I'm trying to do a dynamic carousel, almost succeeded, but I need to make the bootstrap 5 property 'data-bs-slide-to' populate automatically according to a given array.

Complete code:

<template>
    <div :style="styles" id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button v-for="(item, index) in imagesUrl" :key="index" data-bs-slide-to="0" type="button" data-bs-target="#carouselExampleIndicators"  ></button>
  </div>
  <div class="carousel-inner">
    <div v-for="(item, index) in imagesUrl" :key="index"  :class="{'carousel-item': true, active: index == 0 }" >
      <img v-bind:src="item" class="d-block w-100" alt="...">
    </div>
</div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <font-awesome-icon icon="angle-left" size="3x"/>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <font-awesome-icon icon="angle-right" size="3x" />
  </button>
</div>
</template>
<script>
  import 'bootstrap/js/dist/carousel';

    export default {
  data() {
    return {
      // arrayTexts: [] no consider this
    };
  },
  props: {
    colorBtnSlider: {
      type: String,
      default: "#A93226",
    },
    colorHover: {
      type: String,
      default: "#F4D03F",
    },
    imagesUrl:{
      type: Array,
      default: () => [],
    }
  },
  computed: {
    styles() {
      return {
        "--carrousel-3--colorBtnSlider": this.colorBtnSlider,
        "--carrousel-3--colorHover": this.colorHover,
      };
    }
  }
};
</script>
<style lang="scss">
.carousel-control-prev-icon , .carousel-control-prev-icon{
    color: var(--carrousel-3--colorBtnSlider);
}
.carousel-control-prev:hover, .carousel-control-next:hover{
    color: var(--carrousel-3--colorHover);
}
</style>

my components work with this json, which allows to generate dynamic components.

 "Carrousel1":{
        "basename":"carrousel-3",
        "path":"./core/carrousel/Carrousel3.vue",
        "props":{
            "colorBtnSlider" : "#A93226",
            "colorHover" : "#A93226",
            "imagesUrl" : [
                "https://picsum.photos/1000/500/?image=55",
                "https://picsum.photos/1000/500/?image=56",
                "https://picsum.photos/1000/500/?image=57"
            ]
        }
    },

try doing something like this which if it worked for me.

 <div v-for="(item, index) in imagesUrl" :key="index"  :class="{'carousel-item': true, active: index == 0 }" >
      <img v-bind:src="item" class="d-block w-100" alt="...">
    </div>

but with the data-bs-slide-to property, which I need to go from 0 forward, for the example from 0 to 2, equivalent to the 3 images added in the json.

    <button v-for="(item, index) in imagesUrl" :key="index" data-bs-slide-to="{{index}}" type="button" data-bs-target="#carouselExampleIndicators"  ></button>

but this doesn't work, try: data-bs-slide-to = "{{index}}" but it doesn't work either.

I'm sorry for my English.

score 2 · Answer 1 · answered Aug 10 '22 at 07:45

The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible. I created the same component using vue.js. In here I added active class to,0 index element using :class="index === 0 ? 'active' : ''" and it worked. Hope this will help someone.

Here is my working code,

 <template>
    <div id="demo" class="carousel slide" data-bs-ride="carousel">

        <!-- The slideshow/carousel -->
        <div class="carousel-inner">
            <div class="carousel-item" v-for="(image, index) in images" :key="index"
                :class="index === 0 ? 'active' : ''">
                <img :src=image alt="image" class="d-block w-100" />
            </div>
        </div>

        <!-- Indicators/dots -->
        <div class="carousel-indicators">
            <button type="button" v-for="(image, index) in images" :key="index"
                data-bs-target="#demo" :data-bs-slide-to="`${index}`" class="thumbnail"
                :class="index === 0 ? 'active' : ''">
                <img :src=image alt="image" class="d-block w-100">
            </button>
        </div>

        <!-- Left and right controls/icons -->
        <button class="carousel-control-prev" type="button" data-bs-target="#demo"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#demo"
            data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>
</template>

In your case, I will modify it as below,

<button v-for="(item, index) in imagesUrl" :key="index" :data-bs-slide-to="`${index}`" type="button" data-bs-target="#carouselExampleIndicators" :class="index === 0 ? 'active' : ''" >
</button>

score 1 · Answer 2 · answered Nov 22 '21 at 01:08

I found the solution, it was simpler than I thought, I just had to use template strings.

thus:

<button v-for="(item, index) in imagesUrl" :key="index" :data-bs-slide-to="`${index}`" type="button" data-bs-target="#carouselExampleIndicators"  ></button>

so i can use v-for index for bootstrap tag.

How to change the value of data-bs-slide-to dynamically bootstrap 5 and vue js 2

2 Answers2