こんにちはgrandstreamです。
今回は、vue.jsと併用できる「vue-awesome-swiper」を使用して、サムネイル付きのスライダーを作ってみたいと思います。
サムネイル付きスライダーのデモ動画
今回は下の動画のような、サムネイル付きスライダーを作ってみます。
各ファイルのコード
今回は以下の3つのファイルに分けて作成しました。
- index.html
- script.js
- style.css
まずは全てのファイルのコードを掲載します。
後で少しコードの説明をしますが、読むのが面倒くさい方はコピペしてまずは動かしてみましょう。
サムネイル付きスライダーの作成手順
では、vue-awesome-swiperを用いた、サムネイル付きスライダーの作成手順を見ていきましょう。
各種CDNの読み込み（index.html）
body閉じタグ前の部分で、swiperやvue-awesome-swiper、そしてvue.jsのCDNを読み込んでいます（黄色ハイライト部分）。
なお、script.jsファイルはこれらのCDNの後に読み込むようにしましょう。
スライダー部分のマークアップ（index.html）
一番外側のdivタグにはid属性を指定し、このコンポーネントをvue.jsの操作対象とします。
<swiper-slide>タグ部分が繰り返し表示される部分なので、ここに、vue.jsのv-forを設定します。
スライダーを動かす（script.js）
さて、jsファイルではvue-awesome-swiperを呼び出し、vueインスタンス内で使用できるようにします。
swiperTop（メインスライド）とswiperThumbs（サムネイルスライド）のそれぞれのスライドに対して、色々とオプションを追加していきます。
注意点としては、loopedSlidesの値は、2つのスライドで同じ値を設定するようにしましょう。バラバラに設定してしまうと、メインスライドとサムネイルの表示がズレてしまいます。
ちなみに、mounted()部分に書かれているのが、メインスライドとサムネイルをシンクロさせるための記述です。
Slidesの部分は今回はベタ打ちしていますが、ここにAPIから取得した配列を格納すれば、動的にスライドを表示させることができますね。
スタイル調整（style.css）
ここは各自で自由に調整してください。
なお、先ほどindex.htmlで記述した<swiper>や<swiper-slide>タグは、実際のweb上ではdivタグに変換されて、独自のclassも自動で付加されているので、デベロッパーツールなどで確認しながらスタイル調整すると良いと思います。
まとめ
最後に今回参考にさせていただいたサイトを掲載しておきます。
１つ目のサイトにはスライドのサンプルがたくさん掲載されているので、自分が実現したいものを探して、色々試してみるといいかもしれません。（レスポンシブ対応のサンプルもありました！）
では、今回はこのへんで。
コメント