From 2015797c71fc4ee6f924b532f5a4776b7503c5b1 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Tue, 22 Jan 2019 12:52:10 +0000
Subject: [PATCH] use BackgroundImageLoader

---
 pages/index.vue | 49 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/pages/index.vue b/pages/index.vue
index eb34f88..7ac1b02 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,10 @@
 <template>
   <ContentPage heading="The Index Page Heading">
-    <BackgroundImageLoader slot="background" />
+    <BackgroundImageLoader slot="background"
+                           :image-url="currentImageUrl"
+                           @imageLoaded="handleImageLoaded"
+                           @imageLoadError="handleImageLoadError"
+    />
   </ContentPage>
 </template>
 
@@ -18,7 +22,50 @@ export default {
 
   data() {
     return {
+      currentImageIndex: -1,
+      bgImages: [
+        'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/slider.jpg',
+        'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/slider-2.jpeg',
+        'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/slider-3.jpeg',
+        'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/4-edit-3.jpg',
+        'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/4-edit.jpg',
+        'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/image-1.png',
+        'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/slider-4.jpeg',
+      ],
     }
+  },
+
+  computed: {
+    currentImageUrl () {
+      let url = null
+      if (this.currentImageIndex > -1) {
+        url = this.bgImages[this.currentImageIndex]
+      }
+      return url
+    }
+  },
+
+  mounted () {
+    if (this.bgImages.length > 1) {
+      this.setNextIndex()
+    }
+  },
+
+  methods: {
+    setNextIndex () {
+      this.currentImageIndex =
+        this.currentImageIndex < this.bgImages.length - 1 ? this.currentImageIndex + 1 : 0
+    },
+
+    handleImageLoaded () {
+      window.setTimeout(() => {
+        this.setNextIndex()
+      }, 3000)
+    },
+
+    handleImageLoadError () {
+      this.setNextIndex()
+    },
   }
 }
 </script>