こんにちは！あっきー (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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
window.onload=function(){ new Vue({ el: '#app', data: { slides: [ {img: 'slide-1.jpg'}, {img: 'slide-2.jpg'}, {img: 'slide-3.jpg'} ], } }) } |
CSS で画像を重ねる
いまのところ画像一覧が下に向かってただ表示されているだけですね。
この画像を重ねて最初の一件だけ表示されているような状態にします。
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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
|
1 2 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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
|
1 2 3 4 5 |
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
|
1 2 3 4 5 6 7 8 9 |
<body> <div id="app"> <div class="slider-outer"> <transition name="fade"> <!--追加--> <!--中略--> </transition> </div> </div> </body> |
CSSにトランジションの効果を加えます。
style.css
|
1 2 3 4 5 6 |
.fade-enter-active, .fade-leave-active { transition: all 1s ease; } .fade-enter, .fade-leave-to { opacity: 0; } |
画面を確認してみてください。最初の動画のようにふわっと画像が切り替わることが確認できると思います。
完成コード(コピペOK)
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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でもプログラミングに関してのツイートをリアルタイムでしていますので
ご一緒にフォローもお願いします。