Carousel - Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/carousel/

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-carousel controls indicators :interval="3000" background="#ABABAB" >

    <!-- Text slides -->
    <b-carousel-slide  caption="First slide" text="Nulla vitae elit libero, a pharetra augue mollis interdum." img="http://placeskull.com/600/300/ABABAB/-1/0">
    </b-carousel-slide>

    <!-- Slides with custom text -->
    <b-carousel-slide height="300px" img="http://placeskull.com/600/300/1C90F3/-1/0">
      Hello world
    </b-carousel-slide>

    <!-- Slides with image -->
    <b-carousel-slide height="300px" img="http://placeskull.com/600/300/f44336/-1/0">
    </b-carousel-slide>

  </b-carousel>
</div>

CSS

#app {
  padding: 20px;
  height: 500px;
}

JavaScript

new Vue({
  el: '#app'
})