feat: Add CCarosuel component.

src/views/base/Carousels.vue

@@ -1,72 +1,37 @@
-<template>
+<template functional>
   <div class="wrapper">
     <div class="animated fadeIn">
       <CRow>
         <CCol md="12" lg="9" >
           <CCard>
             <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i><strong> Bootstrap Carousel</strong>
+              <i class="fa fa-align-justify"></i>
+              <strong> Bootstrap Carousel</strong>
               <div class="card-header-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/carousel" class="card-header-action" rel="noreferrer noopener" target="_blank">
+                <a
+                  href="https://bootstrap-vue.js.org/docs/components/carousel"
+                  class="card-header-action"
+                  rel="noreferrer noopener"
+                  target="_blank"
+                >
                   <small class="text-muted">docs</small>
                 </a>
               </div>
             </CCardHeader>
-            <div>
-              <CCarousel/>
-              <br>
-              <b-carousel id="carousel1"
-                          style="text-shadow: 1px 1px 2px #333;"
-                          controls
-                          indicators
-                          background="#ababab"
-                          :interval="400000"
-                          img-width="1024"
-                          img-height="480"
-                          v-model="slide"
-                          @sliding-start="onSlideStart"
-                          @sliding-end="onSlideEnd"
-              >
-
-                <!-- Text slides with image -->
-                <b-carousel-slide caption="First slide"
+            <CCarousel>
+              <CCarouselItem
+                caption="First Slide"
+                imgSrc="https://lorempixel.com/1024/480/technics/2/"
                 text="Nulla vitae elit libero, a pharetra augue mollis interdum."
-                                  img-src="https://lorempixel.com/1024/480/technics/2/"
-                ></b-carousel-slide>
-
-                <!-- Slides with custom text -->
-                <b-carousel-slide img-src="https://lorempixel.com/1024/480/technics/4/">
-                  <h1>Hello world!</h1>
-                </b-carousel-slide>
-
-                <!-- Slides with image only -->
-                <b-carousel-slide img-src="https://lorempixel.com/1024/480/technics/8/">
-                </b-carousel-slide>
-
-                <!-- Slides with img slot -->
-                <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
-                <b-carousel-slide>
-                  <img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
-                       src="https://lorempixel.com/1024/480/technics/5/" alt="image slot">
-                </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>
+              />
+              <CCarouselItem
+                active
+                imgSrc="https://lorempixel.com/1024/480/technics/4/"
+              />
+              <CCarouselItem
+                imgSrc="https://lorempixel.com/1024/480/technics/8/"
+              />
+            </CCarousel>
           </CCard>
         </CCol>
       </CRow>
@@ -76,22 +41,6 @@
 
 <script>
 export default {
-  name: 'carousels',
-  data () {
-    return {
-      slide: 0,
-      sliding: null
-    }
-  },
-  methods: {
-    onSlideStart (slide) {
-      console.log('onSlideStart', slide)
-      this.sliding = true
-    },
-    onSlideEnd (slide) {
-      console.log('onSlideEnd', slide)
-      this.sliding = false
-    }
-  }
+  name: 'carousels'
 }
 </script>