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

投稿日: 2022-04-20 2022-10-08
タグ: 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に設定します。
作成した startSlide 4秒ごとに画像をスライドさせる機能。
作成した 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>

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

このコンポーネントの見栄えを良くするには、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);
}

先に述べたように、ビルトインを使用しました transition-group 次のような既成のクラス名を持つVue.jsのコンポーネント 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のここにあります。

getdocs

13036