use BackgroundImageLoader

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>