Jumbotron - Bootstrap-Vue

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

by Issaki1

HTML

<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.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
      id="carousel-1"
      v-model="slide"
      :interval="4000"
      controls
      indicators
      background="#ababab"
      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://source.unsplash.com/LAaSoL0LrYs/1920x1080"
      ></b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://source.unsplash.com/bF2vsubyHcQ/1920x1080">
        <h1>Hello world!</h1>
      </b-carousel-slide>

      <!-- Slides with image only -->
      <b-carousel-slide img-src="https://source.unsplash.com/szFUQoyvrxM/1920x1080"></b-carousel-slide>
    </b-carousel>
  </div>

JavaScript

new Vue({
  el: '#app',
  data: { 
      slide: 0,
      sliding: null
      
  },
  methods: {
  onSlideStart(slide) {
      this.sliding = true;
    },
    onSlideEnd(slide) {
      this.sliding = false;
    }
  }
  
  


})