Vue.jsで画像スライダーを作成する方法

ご存知のように、Vue.jsは最も人気のあるプログレッシブJavaScriptフレームワークの1つであり、他のフレームワークと比較して多くの利点があります。このチュートリアルは、追加のサードパーティライブラリを使用せずに、Vueイメージスライダーコンポーネントを最初から作成するのに役立ちます。

プロジェクトの設定

まだ行っていない場合は、新しいVue.jsプロジェクトを作成する前に、次の手順を実行して、マシンにVueCLIをグローバルにインストールする必要があります。

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

VueCLIを使用して新しいプロジェクトを作成します。

$ vue create vue-image-slider
$ cd vue-image-slider

次に、serveスクリプトを実行して、ローカルサーバーを起動します。

$ npm run serve

これで、Vue.jsプロジェクトが正常に実行されます。

スライダーコンポーネントの作成

HelloWorldコンポーネントが自動的に生成されていることに気付くかもしれません。そのコンポーネントの名前をSliderに変更して内部で変更を加えるか、コンポーネントを削除して新しいSliderコンポーネントを作成することができます。ただし、どちらの場合も、必ずApp.vue内に適切なコンポーネントをインポートしてください。

新しいSliderコンポーネントを作成し、次の機能を追加しましょう。

<template>
  <h1>Heading</h1>
</template>
<script>
export default {
  name: "Slider",
  data() {
    return {
      images: [
        "https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg",
        "https://cdn.pixabay.com/photo/2016/02/17/23/03/usa-1206240_1280.jpg",
        "https://cdn.pixabay.com/photo/2015/05/15/14/27/eiffel-tower-768501_1280.jpg",
        "https://cdn.pixabay.com/photo/2016/12/04/19/30/berlin-cathedral-1882397_1280.jpg"
      ],
      timer: null,
      currentIndex: 0
    };
  },

  mounted: function() {
    this.startSlide();
  },

  methods: {
    startSlide: function() {
      this.timer = setInterval(this.next, 4000);
    },

    next: function() {
      this.currentIndex += 1;
    },
    prev: function() {
      this.currentIndex -= 1;
    }
  },

  computed: {
    currentImg: function() {
      return this.images[Math.abs(this.currentIndex) % this.images.length];
    }
  }
};
</script>

ここで行ったことを見てみましょう。

Pixabayから画像URLの配列を取得しました。
timerをnullに設定し、currentIndexを0に設定して最初の画像を表示します。
4秒ごとに画像をスライドさせるstartSlide関数を作成しました。
前または次の画像にスライドするためのnextおよびprev関数を作成しました。最後のcurrentImg関数によると、インデックスに基づいて、その時点でどの画像を表示する必要があるかを検出します。

マークアップ/HTML部分をコンポーネントに追加する時が来ました：

<template>
  <div>
    <transition-group name="fade" tag="div">
      <div v-for="i in [currentIndex]" :key="i">
        <img :src="currentImg" />
      </div>
    </transition-group>
    <a class="prev" @click="prev" href="#">&#10094; Previous</a>
    <a class="next" @click="next" href="#">&#10095; Next</a>
  </div>
</template>

ここでは、Vue.jsに付属している組み込みのtranstion-groupコンポーネントを利用してから、画像を繰り返し、前に作成した関数を追加します。

このコンポーネントの見栄えを良くするには、CSSスタイルを追加する必要があります。

.fade-enter-active,
.fade-leave-active {
  transition: all 0.9s ease;
  overflow: hidden;
  visibility: visible;
  position: absolute;
  width:100%;
  opacity: 1;
}

.fade-enter,
.fade-leave-to {
  visibility: hidden;
  width:100%;
  opacity: 0;
}

img {
  height:600px;
  width:100%
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.7s ease;
  border-radius: 0 4px 4px 0;
  text-decoration: none;
  user-select: none;
}

.next {
  right: 0;
}

.prev {
  left: 0;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.9);
}

前述したように、Vue.jsの組み込みのtransition-groupコンポーネントを使用しました。このコンポーネントには、fade-enter-active、fade-leave-activeなどの既成のクラス名があります。

App.vueに変更を加える

App.vueを確認し、Sliderコンポーネントをインポートすることを忘れないでください。

<template>
  <div id="app">
    <Slider />
  </div>
</template>

<script>
import Slider from "./components/Slider.vue";
export default {
  name: "app",
  components: {
    Slider
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
body {
  margin: 0px;
}
</style>

それでおしまい！画像スライダーを使用する準備が整いました。完全なソースコードは、Githubのここにあります。