Nuxt.jsの基礎勉強-画像のスライドを作ってみた-

Vue.js Nuxt.js

はじめに

今回は画像のスライド機能を作ってみた話についてまとめていく。

画像をスライドした

文字列のスライドを参考にした

色々調べてみたら文字列で実装している方がいたので、このコードを動かしてみることにしました。

文字列から画像に変更を加える

参考記事

問題

参考記事によるとv-bindの読み込み時のコンパイル方法により、画像などの変数で与えたパスを読み込む際にパス情報が誤った情報として読み込まれてしまう問題がある。

その結果、<img :src="">でうまく画像を読み込めないというバグが発生する。

解決方法

上記記事の方法で個人的に使用しやすいrequireを用いた方法を利用した。

      products: [
        require('@/assets/hoge.jpg'),
        require('@/assets/huga.jpg'),
        require('@/assets/hogege.jpg'),
      ]

自分のソースに落とし込む

template部分

<template>
  <div>
    <button @click="beforeSlide">
      前
    </button>
    <button @click="nextSlide">
      次
    </button>
    <transition name="slide">
      <div :key="products[product]">
        <img :src="products[product]" class="img-size">
      </div>
    </transition>
  </div>
</template>

script部分

参考プログラムだとnextSlide()がワンライナーで読みづらかったので、通常のif文に落とし込んだ。

また、自動スライド機能に関してはいらなかったので消して、代わりにbeforeSlide()機能を追加した。

<script>
export default {
  data: function() {
    return {
      product: 0,
      products: [
        require('@/assets/hoge.jpg'),
        require('@/assets/huga.jpg'),
        require('@/assets/hogege.jpg'),
      ]
    }
  },
  methods: {
    nextSlide: function() {
      if(this.product < this.products.length - 1){
        this.product += 1
      }else{
        this.product = 0
      }
    },
    beforeSlide: function() {
      if(this.product > 0){
        this.product -= 1
      }else{
        this.product = this.products.length - 1
      }
    }
  }
}
</script>

style部分

参考プログラムだと

  • leave処理が遅くてenter処理と被ることがある

そのため、以下の処理に変更した

  • leave処理を早くする
  • leave処理を消えるだけにする
<style>
.slide-enter-active {
  transition: transform 0.75s
}
.slide-leave-active{
  transition: transform 0s
}
.slide-enter {
  transform: translateX(300px)
}
.slide-leave {
  transform: opacity 0
}

.img-size{
  position: absolute;
  width: 100%;
}
</style>

終わりに

今回はv-bindでの画像読み込みや<style>のhoge-enterやhoge-leaveなどの挙動について学ぶことができた。