【Vue.js】Vue.js+ cssで作る簡単なスライダー（カルーセル）

本記事の内容

　プラグインなどを使わず、Nuxt.js（Vue.js）とcss3だけでさくっとスライダーを作る記事です。シンプルな内容なので、Vue.jsと言わず素のJSなどでも似たような処理で作れると思います。

環境

• nuxt.js(2.14.3)
• css3

実装

ImageSlider.vue

<template>
  <div class="slider">
    <span v-for="(image, i) in imagePaths" :key="i">
      <img :class="{ show: currentImageId == i }" :src="image" />
    </span>
  </div>
</template>


<script>
export default {
  data() {
    return {
      currentImageId: 0,
      imagePaths: [
        './images1.jpg',
        './images2.jpg',
        './images3.jpg',
        './images4.jpg',
      ],
    }
  },
  mounted() { // 5秒ごとに次の画像に
    setInterval(() => {
      this.changeNextSlide()
    }, 5000)
  },
  methods: {
    changeNextSlide() { // 表示するcurrentの画像を変えていくため、加算していく
      if (this.currentImageId < this.imagePaths.length - 1) {
        this.currentImageId += 1
      } else {
        this.currentImageId = 0
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.slider {
  width: 300px;
  position: relative;

  span {
    position: absolute;
  }

  span > img {
    width: 100%;
    opacity: 0;
    // ふわっと表示させるためのアニメーション
    transition: all 1s ease-in-out;

    // デフォルトではopacity: 0なので表示されない。
    // currentIndexのものだけopacity: 1にして表示する
    &.show {
      opacity: 1;
    }
  }
}
</style>

ポイント

　単純なv-ifにするとDOMが消え、動作として違和感があるため、同じ場所に重ねて画像を表示して、opacityで非表示表示を切り替えています。

　あとはcaretをつけて、clickしたらcurrentImageIdを変更する処理などを入れれば、左右で任意に動かすカルーセルなども作れます。

最後に

　Vue.jsでカルーセルを使うとなれば、slick.jsやSwiperなど様々なライブラリはあります。
　勿論これらのライブラリはやれること（オプション）も多いですが、その分理解して扱うにはドキュメント読むのが大変だったり、ファイル容量も大きかったり、導入したら特定のブラウザやバージョンで動かなかったり、なんてこともあります。
　それらのライブラリに比べればシンプルでやれることも少ないですが、簡単な機能だけほしいときに、熟知していないライブラリを使うよりサクッと作っちゃうのもありじゃないかなと思います。