bootstrap-vue/src/components/carousel/fixtures/carousel.html

BootstrapVue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js and with extensive and automated WAI-ARIA accessibility markup.

<div id="app">
    <b-carousel id="carousel1"
                ref="carousel"
                controls
                indicators
                :interval="interval"
                v-model="slide"
                @sliding-start="onSlide"
                @sliding-end="onSlid"
                background="grey">

        <!-- Text slides -->
        <b-carousel-slide :img="blankImg(1024,480)"
                          caption="First slide"
                          text="Nulla vitae elit libero, a pharetra augue mollis interdum.">
        </b-carousel-slide>

        <!-- Slides with custom text -->
        <b-carousel-slide :img="blankImg(1024,480)">
            <h1>Hello world!</h1>
        </b-carousel-slide>

        <!-- Slides with image -->
        <b-carousel-slide img="https://lorempixel.com/1024/480/technics/2/">
        </b-carousel-slide>

        <!-- Slides with image -->
        <b-carousel-slide img="https://lorempixel.com/1024/480/technics/4/">
        </b-carousel-slide>

    </b-carousel>

    <p class="mt-4">
        Slide #: {{ slide }}<br>
        Is Sliding: {{ sliding }}
    </p>
</div>