marc-leopold/pages/index.vue

<template>
  <ContentPage heading="The Index Page Heading">
    <BackgroundImageLoader slot="background"
                           :image-url="currentImageUrl"
                           @imageLoaded="handleImageLoaded"
                           @imageLoadError="handleImageLoadError"
    />
  </ContentPage>
</template>

<script>
import ContentPage from '@/components/ContentPage'
import BackgroundImageLoader from '@/components/BackgroundImageLoader'

export default {
  name: 'HomePage',

  components: {
    ContentPage,
    BackgroundImageLoader
  },

  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>

<style scoped lang="scss">
</style>