75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
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()
|
|
}, 6000)
|
|
},
|
|
|
|
handleImageLoadError () {
|
|
this.setNextIndex()
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
</style>
|