【Vue.js】Vue.jsとcssアニメーションで作るスライドショー

Vue.jsとCSSを用いてスライドショーを実装するメモです。
##目的

上記のようなシンプルなスライドショーを実装します。

##実装
###テンプレート

Imageslide.vue

<template>
  <div>
    <transition-group tag="ul" class="images">
      <li
        v-for="(image, index) in demoimages"
        v-show="currentImage == index + 1"
        :key="index"
      >
        <img :src="image.image" alt="" />
      </li>
    </transition-group>
  </div>
</template>

画像をv-forでリストしてv-showで表示を切り替えています。
v-showはv-ifとは違い、DOMを消したり追加したりはせず、display:noneを付与して要素を非表示にします。そのため非表示の画像をもう一度表示する場合も、再度画像が読み込まれるわけではありません。

###スクリプト

Imageslide.vue

<script>
export default {
  data() {
    return {
      currentImage: 1,
    }
  },
  computed: {
    demoimages() {
      return [
        { image: '/images/1.jpg' },
        { image: '/images/2.jpg' },
        { image: '/images/3.jpg' },
      ]
    },
  },
  watch: {
    currentImage() {
      this.autoSlide()
    },
  },
  mounted() {
    this.autoSlide()
  },
  methods: {
    async autoSlide() {
      const wait = (ms) =>
        new Promise((resolve) => setTimeout(() => resolve(), ms))
      await wait(2000)
      if (this.currentImage > this.images.length - 1) {
        this.currentImage = 1
      } else {
        this.currentImage++
      }
    },
  },
}
</script>

表示されている画像のインデックスを示すcurrentImageをウォッチしてautoSlide()を実行しています。currentImageが画像のリストを超えた場合に初期化することで無限ループになります。

###スタイル

Imageslide.vue

<style lang="scss" scoped>
.images {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  li {
    width: 100%;
    height: 100%;
    max-height: 627px;
    position: absolute;
    top: 0;
    left: 0;
  }
}
img {
  width: 100%;
  height: 100%;
  max-height: 627px;
  margin: auto;
  z-index: 2;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s;
}

.v-enter,
.v-leave-to {
  opacity: 0;
}
</style>

リストの親要素にposition:relativeを指定し、子要素にposition:absolute top:0 left:0を指定することで同じ位置に画像を重ねることができます。
.v-enter-active,.v-leave-active,.v-enter,.v-leave-toはtransitionによってVueから自動的に付与されるクラスです。
##まとめ
Vue.jsとCSSを使用したスライドショーの実装方法について簡単に説明してみました。私はこのように実装しましたが、おそらく別の方法もあるかと思います。いろいろ試してみてください！