Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

posted at

updated at

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?