初心者向け。Vue.jsで作る自作のカルーセルスライダーの解説
2281 回閲覧されました
Vue.jsのスライダーだとライブラリがよく使われますが読み込みをするから画面表示的に好きではないです。
だからネットで調べて自作のカルーセルスライダーを実装したのですが実装方法を忘れないために自分への解説の記事を書きました。
デモは↓です。
完成形のコードは↓です。
それでは解説します。
5行目と6行目で3枚の画像を表示できるようにします、10行目が画像を表示するためのsrc属性です。
src属性の中身ですが29行目から39行目です。
29行目のimagesは5行目のimagesと同じです。
画像は最初の状態は1枚目が表示されていて2枚目、3枚目は非表示になっていないといけません。
それを実現するためにv-showディレクティブ（4行目）を使います。
v-showディレクティブの条件は画像のインデックス番号（5行目のindexのこと）と「＞」、「＜」をクリックして増えていく番号（以後増えていく番号とします）が一致することです。（4行目のv-show=”index === page”のこと、pageの解説は後述）
画像のインデックス番号は最初は0（デフォルト）で増えていく番号は最初は0に設定（29行目のpage:0）することで1枚目の画像を表示します。
「＞」、「＜」をクリックすると画像が切り替わる（2枚目。3枚めに変わっていく）ようにします。
「＞」、と「＜」はできることがほとんど同じ（「＞」は次の画像になり「＜」は前の画像になる）なので「＞」の解説をします。
クリックした時に画像が切り替わるようにするのでv-onディレクティブを使います。（15行目の@click=”nextPage”です）
nextPageの中身は43行目から51行目です。
画像をクリックするたびに増えていく番号が1づつ増えてインデックス番号も1づつ増えるので4行目のv-show=”index === page”が成立して画像が切り替わります。
このままクリックを続けると増えていく番号は増えていきますが（画像は3枚しかなくて0からスタートなので2までじゃないといけない）インデックス番号の値を超えて（インデックス番号は2までだけどそれより大きくなる）エラーになるので回避するために44行目から47行目があります。
増えていく番号の値がインデックス番号以上になったら増えていく番号の値を0にして最初の画像に戻します。（45行目と46行目）
50行目から55行目は「＜」と逆のことをしています。
これで完成です。