<template>
 <div id="home">
   <b-carousel id="homeSlider"
               style="text-shadow: 1px 1px 2px #333;"
               controls
               :interval="4000"
               img-width="1024"
               img-height="480"
               v-model="slide"
               @sliding-start="onSlideStart"
               @sliding-end="onSlideEnd">
     <b-carousel-slide>
       <img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
            src="../assets/images/img1.png" alt="image slot">
       <h1><b>Simplifying the journey</h1>
     </b-carousel-slide>
     <b-carousel-slide>
       <img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
            src="../assets/images/img2.png" alt="image slot">
       <h1><b>Connecting the dots </h1>
     </b-carousel-slide>
     <b-carousel-slide>
       <img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
            src="../assets/images/img3.png" alt="image slot">
       <h1><b>The critical decisions</h1>
     </b-carousel-slide>
   </b-carousel>
    <!-- <div class="carousel-controls-separator"></div> -->
 </div>
</template>