Merge branch 'master' of http://192.168.6.188:3000/Provision/UnivateProperties

package-lock.json

         "entities": "^1.1.1"
       }
     },
+    "dom-walk": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
+      "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
       "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
       "dev": true
     },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.6.0.tgz",
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-      "dev": true
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
     },
     "process-nextick-args": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-carousel": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/vue-carousel/-/vue-carousel-0.18.0.tgz",
+      "integrity": "sha512-a2zxh7QJioDxNMguqcuJ7TPbfgK5bGDaAXIia7NWxPAWsEvNE4ZtHgsGu40L5Aha4uyjmNKXvleB14QAXFoKig==",
+      "requires": {
+        "global": "^4.3.2",
+        "regenerator-runtime": "^0.12.1",
+        "vue": "^2.5.17"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
     "vue-cli-plugin-vuetify": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-0.5.0.tgz",

package.json

     "stylus-loader": "^3.0.2",
     "v-file-upload": "^3.1.7",
     "vue": "^2.6.10",
+    "vue-carousel": "^0.18.0",
     "vue-eva-icons": "^1.1.1",
     "vue-excel-export": "^0.1.3",
     "vue-router": "^3.0.7",

src/components/home/carouselSection.vue

 <template>
-  <div class="intro intro-carousel">
-    <div id="carousel" class="owl-carousel owl-theme">
-      <div
-        class="carousel-item-a intro-item bg-image"
-        style="background-image: url(img/slide-1.jpg)"
-      >
-        <div class="overlay overlay-a"></div>
-        <div class="intro-content display-table">
-          <div class="table-cell">
-            <div class="container">
-              <div class="row">
-                <div class="col-lg-8">
-                  <div class="intro-body">
-                    <p class="intro-title-top">
-                      Mooikloof, Pretoria
-                      <br />0081
-                    </p>
-                    <h1 class="intro-title mb-4">
-                      <span class="color-b">10</span> Jollify
-                      <br />Main Road
-                    </h1>
-                    <p class="intro-subtitle intro-price">
-                      <a href="#">
-                        <span class="price-a">rent | R 12 000</span>
-                      </a>
-                    </p>
+  <!-- eslint-disable max-len -->
+  <carousel
+    :per-page="1"
+    :mouse-drag="false"
+    :autoplay="true"
+    :autoplayTimeout="5000"
+    :loop="true"
+    :autoplayHoverPause="false"
+  >
+    <slide
+      v-for="(car, i) in carouselList"
+      :index="i"
+      :key="i"
+      :style="{ height:'1000px', width:'100%',  backgroundImage: 'url(' + car.image + ')',  backgroundSize: 'cover', backgroundPosition: 'center center'}"
+      calss="myClass"
+    >
+      <div class="intro-content display-table">
+        <div class="table-cell">
+          <div class="container">
+            <div class="row">
+              <div class="col-lg-8">
+                <div
+                  class="price-a"
+                  style="opacity:0.95; border: white solid 3px; border-radius: 15px; background-color: white;"
+                >
+                  <h1 class="intro-title mb-4">{{ car.header }}</h1>
+                  <div v-if="car.isProperty">
+                    <p class="color-b" v-html="car.address" />
                   </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="carousel-item-a intro-item bg-image"
-        style="background-image: url(img/slide-2.jpg)"
-      >
-        <div class="overlay overlay-a"></div>
-        <div class="intro-content display-table">
-          <div class="table-cell">
-            <div class="container">
-              <div class="row">
-                <div class="col-lg-8">
-                  <div class="intro-body">
-                    <p class="intro-title-top">
-                      R303, Koue Bokkeveld, Cederberg
-                      <br />6836
-                    </p>
-                    <h1 class="intro-title mb-4">
-                      <span class="color-b">Kagga</span> Kamma
-                      <br />
-                    </h1>
-                    <p class="intro-subtitle intro-price">
-                      <a href="#">
-                        <span class="price-a">rent | R 12 000</span>
-                      </a>
-                    </p>
+                  <div v-else>
+                    <ul class="list color-b">
+                      <li class="d-flex justify-content-between">
+                        <strong>Bedrooms:</strong>
+                        <span>{{ car.bedrooms }}</span>
+                      </li>
+                      <li class="d-flex justify-content-between">
+                        <strong>Sleeps:</strong>
+                        <span>{{ car.sleeps }}</span>
+                      </li>
+                      <li class="d-flex justify-content-between">
+                        <strong>Check in:</strong>
+                        <span>{{ car.arrival | toDate }}</span>
+                      </li>
+                      <li class="d-flex justify-content-between">
+                        <strong>Check out:</strong>
+                        <span>{{ car.departure | toDate}}</span>
+                      </li>
+                    </ul>
                   </div>
                 </div>
               </div>
           </div>
         </div>
       </div>
-      <div
-        class="carousel-item-a intro-item bg-image"
-        style="background-image: url(img/slide-3.jpg)"
-      >
-        <div class="overlay overlay-a"></div>
-        <div class="intro-content display-table">
-          <div class="table-cell">
-            <div class="container">
-              <div class="row">
-                <div class="col-lg-8">
-                  <div class="intro-body">
-                    <p class="intro-title-top">
-                      Farm Whisky, Tenbosch Road, Komatiepoort
-                      <br />1340
-                    </p>
-                    <h1 class="intro-title mb-4">
-                      <span class="color-b">Ngwenya</span> Lodge
-                      <br />
-                    </h1>
-                    <p class="intro-subtitle intro-price">
-                      <a href="#">
-                        <span class="price-a">rent | R 12 000</span>
-                      </a>
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+    </slide>
+  </carousel>
 </template>
+
 <script>
 import { mapState, mapActions } from 'vuex';
+import { Carousel, Slide } from 'vue-carousel';
 
 export default {
+  components: {
+    Carousel,
+    Slide,
+  },
   methods: {
     ...mapActions('carousel', ['getCarouselList']),
   },