概要
追記
<iframe src="https://codesandbox.io/embed/slideshow-ubsj3?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="Slideshow" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
スクリプト
メモ
<div v-for="(image, index) in images"
v-if="index===selectedIndex"
:key="index"
:style="{background: 'no-repeat center/cover url(' + images[index] +')'}">
</div>
<transition name="fade" mode="in-out">
...
</transiton>
全体
showcase.vue<template>
<div class="showcase">
<transition name="fade" mode="in-out"> <!-- 新しい方を表示してから古い方を消す -->
<div class="image"
v-for="(image, index) in images"
v-if="index===selectedIndex" <!-- インデックスを元に表示する画像を指定 -->
:key="index"
:style="{background: 'no-repeat center/cover url(' + images[index] +')'}"> <!-- 背景画像にバインド -->
</div>
</transition>
</div>
</template>
<script>
export default {
data () {
return {
selectedIndex: 0,
images: ['画像URL', '画像URL', ... '画像URL']
}
},
created () {
setInterval(function () {
if (this.selectedIndex++ >= this.url.length - 1) {
this.selectedIndex = 0
}
}.bind(this), 8000)
}
}
</script>
<style lang="scss">
.showcase {
height: 100vh;
width: 100vw;
.image{
position: absolute;
height: 100%;
width: 100%;
}
}
.fade-enter-active, .fade-leave-active {
transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>