Does the Carousel component work?

I am trying to use the BCarousel component but I can’t get it to work and it doesn’t appear to have an example in the docs: https://github.com/cdmoro/bootstrap-vue-3/tree/main/docs/components

There are no errors being displayed, all of the HTML appears to be there, but nothing is visible from the slides. This is all that you see:

Using this code from the Bootstrap-Vue documentation: https://bootstrap-vue.org/docs/components/carousel

<template>
  <div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="4000"
      controls
      indicators
      background="#ababab"
      img-width="1024"
      img-height="480"
      style="text-shadow: 1px 1px 2px #333;"
      @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://picsum.photos/1024/480/?image=52"
      ></b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
        <h1>Hello world!</h1>
      </b-carousel-slide>

      <!-- Slides with image only -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>

      <!-- Slides with img slot -->
      <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
      <b-carousel-slide>
        <template #img>
          <img
            class="d-block img-fluid w-100"
            width="1024"
            height="480"
            src="https://picsum.photos/1024/480/?image=55"
            alt="image slot"
          >
        </template>
      </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 {
    data() {
      return {
        slide: 0,
        sliding: null
      }
    },
    methods: {
      onSlideStart(slide) {
        this.sliding = true
      },
      onSlideEnd(slide) {
        this.sliding = false
      }
    }
  }
</script>

[VividLemon]

It would be nice to try to transition away from using Bootstrap js code and using only Vue internally. The carousel js code is relatively simple, which is nice. Most of it is handling some event listeners, and controlling how the images change. Both of which are extremely simple, thanks to Vue. But it’s not very important to get to.

[dagnelies]

@gvaliani Actually, the indicators should work …as long as the active slide is the first one.

If another slide is the starting one, there is an undocumented property to add: <b-carousel indicators starting-slide="2" ... where the first slide starts with index 0. It’s a bit ugly but I didn’t know how to make it right.

Note to next developer/fixer: IMHO the active boolean property on the slide should disappear, in favor of only using the starting-slide to determine which slide is “active” at start. This would also solve the “bug” that the carousel does not render if none of the slides is marked as active.