このブログはプログラム開発や学習などの際に役立つ知識や情報を発信するエンジニアのためのトータル技術ブログです。
ご意見やご要望にも積極的に答えていきますので、お気軽にお問い合わせください。

記事へのリクエストはこちら

【Vue.js】 Transitionでクロスフェードなスライダーをつくる方法

JavaScript
スポンサーリンク

こんにちは!あっきー (IwswAkht) です!

本日は Vue.js で複数の画像をスライドさせる方法を記事にしました!

フロント側でよく使う機能だと思いますのでご参考になれば幸いです。

それではまとめていきます。

 

スポンサーリンク

はじめに

 

まずは完成のイメージを動画で確認してください!

 

 

画像がふわっと切り替わるイメージでスライドされます。

下準備として適当なフォルダを作成して中に .html, .css, .js ファイルと好きな画像を適当に格納しておいてください。

↓フォルダ構成の例↓

[CrossFade]

|_index.html
|_style.css
|_app.js
|_slide-1.jpg
|_slide-2.jpg
|_slide-3.jpg

 

CDN を使用して作成していますので、環境構築は不要です!

慣れてきたらコンポーネント化して組み込んでみたりするとさらに勉強になるかと思います

 

画像をループで一覧表示

 

まずはフォルダに格納された画像を一覧で表示させましょう。

 

・index.html

<DOCTYPR thml>
<html>
  <head>
    <meta charset="utf8">
      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
      <script type="text/javascript" src="main.js"></script>
      <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div id="app">
      <div class="slider-outer">
        <div class="slider-inner" v-for="slide in slides">
          <img class="slide-img" v-bind:src="slide.img" width="450" height="300">
        </div>
      </div>
    </div>
  </body>
</html>

 

・app.js

window.onload=function(){
  new Vue({
    el: '#app',
    data: {
      slides: [
        {img: 'slide-1.jpg'},
        {img: 'slide-2.jpg'},
        {img: 'slide-3.jpg'}
      ],
    }
  })
}

 

CSS で画像を重ねる

 

いまのところ画像一覧が下に向かってただ表示されているだけですね。

この画像を重ねて最初の一件だけ表示されているような状態にします。

 

・style.css

html,body{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.slider-outer{
  position: relative;
  width: 450px;
  height: 300px;
  overflow: hidden;
  margin: 0 auto 20px;
}
.slider-inner{
  position: absolute;
  width: 450px;
  height: 300px;
}
.slide-img {
  width: 450px;
  height: 300px;
  object-fit: cover;
}

 

この重なった画像にインデックスを振ってインデックスを変化させていけばスライドするようになります。

 

画像を切り替える

 

先ほどの HTML に以下の修正を加えてください。

 

・index.html

<div class="slider-inner" :key="idx" v-for="(slide, idx) in slides" v-if="current_slide == idx">
  <img class="slide-img" v-bind:src="slides[idx].img" :key="slides[idx].img" width="450" height="300">

 

以下の実装を追加してます。

1.ループでの画像表示の時にインデックス(idx)を振り分け、条件値(current_slide)とインデックスが一致した場合表示。

2.配列[idx]の画像を表示。

試しに先ほどの Jsファイルに以下の修正を加えて条件値の値を変更することで表示される画像がかわることを確認してみてください。

 

・app.js

window.onload=function(){
  new Vue({
    el: '#app',
    data: {
      current_slide: 0, //追加
      slides: [
        {img: 'slide-1.jpg'},
        {img: 'slide-2.jpg'},
        {img: 'slide-3.jpg'}
      ],
    },
    mounted() {
      this.current_slide = 0 //ここの値を0-2に変化させると表示画像も変化する   
    }
  })
}

 

あとは一定時間経過するごとに条件値を増やせば自動で画像が切り替わります。

mountedに以下の修正を加えてください。

 

・app.js

mounted() {
  setInterval(() => {
      this.current_slide = this.current_slide < this.slides.length -1 ? this.current_slide +1 : 0
    }, 3000)
}

 

1.setIntervalメソッドの引数に3秒を設定。
2.時間が経過するごとに条件値の値を増やす
3.条件値が配列の最後の値に到達したら0に戻す

これでずっと画像がスライドで切り替わるようになります。

あとはトランジションで効果を加えて終了です。

 

Transition で効果を加える

 

HTMLファイルないのスライド部分ををTransitionタグで囲みます。

 

・index.html

<body>
  <div id="app">
    <div class="slider-outer">
      <transition name="fade">  <!--追加-->
        <!--中略-->
      </transition>
    </div>
  </div>
</body>

 

CSSにトランジションの効果を加えます。

・style.css

.fade-enter-active, .fade-leave-active {
  transition: all 1s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

 

画面を確認してみてください。最初の動画のようにふわっと画像が切り替わることが確認できると思います。

 

完成コード(コピペOK)

 

・index.html

<DOCTYPR thml>
<html>
  <head>
    <meta charset="utf8">
      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
      <script type="text/javascript" src="main.js"></script>
      <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div id="app">
      <div class="slider-outer">
        <transition name="fade">
          <div class="slider-inner" :key="idx" v-for="(slide, idx) in slides" v-if="current_slide == idx">
            <img class="slide-img" v-bind:src="slides[idx].img" :key="slides[idx].img" width="450" height="300">
          </div>
        </transition>
      </div>
    </div>
  </body>
</html>

・style.css

html,body{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.slider-outer{
  position: relative;
  width: 450px;
  height: 300px;
  overflow: hidden;
  margin: 0 auto 20px;
}
.slider-inner{
  position: absolute;
  width: 450px;
  height: 300px;
}
.slide-img {
  width: 450px;
  height: 300px;
  object-fit: cover;
}
.fade-enter-active, .fade-leave-active {
  transition: all 1s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

 

・app.js

window.onload=function(){
  new Vue({
    el: '#app',
    data: {
      current_slide: 0,
      slides: [
        {img: 'slide-1.jpg'},
        {img: 'slide-2.jpg'},
        {img: 'slide-3.jpg'}
      ],
    },
    mounted() {
      setInterval(() => {
        this.current_slide = this.current_slide < this.slides.length -1 ? this.current_slide +1 : 0
      }, 3000)
    }
  })
}

 

トランジションや CSS の幅の設定などは自由に変えて使ってください!

さいごに

 

最後まで読んでいただきありがとうございます。

これからよく使いそうな機能はコンポーネント化しやすくするため、このように個別でスクリプトをつくっては公開しようと思います!

ぜひ、使っていってください!

この記事を気に入っていただけましたらTwitterdでもプログラミングに関してのツイートをリアルタイムでしていますので
ご一緒にフォローもお願いします。

 

スポンサーリンク
あっきー

元キャバクラ店長から未経験でエンジニアに転職した異端児。

「週4の5時間勤務、月収100万円」を実現させ、ゆるりと生きることを目標に日々パソコンと奮闘している。

自分の経験を元に、未経験からでも挫折しないプログラミングの勉強方法や最新技術や情報などを発信していきます。

あっきーをフォローする
JavaScriptVue.js
\良い記事だったらシェアしてね!/
スポンサーリンク
駆け出しエンジニアのつぶやき