概要

• 画像が一定時間で切り替わるビューを作る。
• トランジションはフェード。
• 画像は img は使わないで background で表示する。

追記

スクリプト

メモ

• 画像
• 画像URLの配列からv-forで生成。その際インデックスを付けておく。
• 表示するスライドのインデックスをv-ifを使用し変数で指定。

<div v-for="(image, index) in images" 
        v-if="index===selectedIndex" 
        :key="index" 
        :style="{background: 'no-repeat center/cover url(' + images[index] +')'}"> 
</div>

• トランジション
• mode="in-out"で新しい画像を表示してから古い画像を消すようにする

<transition name="fade" mode="in-out">
...
</transiton>

• オート
• setIntervalで一定時間毎に表示するスライドのインデックスを変更する

全体

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']  // 画像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>