Facebook Twitter Google Maps RSS
Home ECサイト 【第1回】ライブラリの使い方 〜 Swiper.js 〜
formats

【第1回】ライブラリの使い方 〜 Swiper.js 〜

こんにちは!
陽気なシステム屋のりょーたです!

本日からスキルアップも兼ねてライブラリ等の使い方を毎月一回投稿しようと思います。
困った時の参考にしていただければ幸いです。

さて、本日は現在実際の業務でも使用している、Swiper.jsの使い方を解説します!

Swiper.jsとは

JavaScriptとCSSのみで構成されている軽量なスライダーで、
レスポンシブデザインにも対応しており、スマホでも軽快に動作する優れものです。

説明を聞くより実際に触った方が分かりやすいと思いますので、公式サイトのデモをご覧ください。

使い方

公式サイトより、Swiper.jsをダウンロードしてください。

次に、ダウンロードしたファイルのdistフォルダ内にある、swiper.jsとswiper.cssをHTMLに読み込みます。


次にSwiperの本体であるHTMLを追加します。

ここで、swiper-containerで囲んでいる部分がSwiperの大枠となります。
その中にswiper-wrapper、swiper-slideがあり、swiper-slideがスライドされる要素になります。
画像やテキスト等、swiper-slideで囲むことでスライド可能な要素になるということですね。

ちなみにSwiperのサイズは以下の方法で変更できます。

.swiper-container { width: 600px; height: 300px; }

これでHTMLの準備が整いました。
続いて、JavaScriptでSwiperの初期設定を行っていきます。

 

このように、

var (任意の名前) = new Swiper (‘.swiper-container’, {

});

とすることでSwiperを作成することができます。
オプションやパラメータ、メソッドも多く用意されており、ここで設定することができます。
例としてここで設定しているloop属性は、Swiperのスライド1→スライド2→スライド3→スライド1→…のように際限なく繰り返す、というものです。

ですが、このloop属性が少し厄介で苦労しましたので、後述します。

他にもたくさんありますが、数が多く書ききれないため詳しくは公式APIを探ってみてください。

さて、以上でSwiperが動作するようになったと思います。
ですが実際はここからが本番で、個人の目的に合わせカスタマイズしていきますよね。

そこで、私が実際にハマった点とその解決方法をご紹介したいと思います。

ハマった点

私の実現したかった機能として、
”DBから画像を取得・設定後、Swiperを自動で動かしループさせ、表示されているスライド画像をクリックするとリンクを開く”
という、ごく普通でよくある機能でした。

はじめにIndexで制御できないかと思い、現在アクティブなスライドのインデックスをとるメソッド、mySwiper.activeIndexを使用し、DBから取得している画像のリンクとひも付けて表示させようとしました。
しかし、結果はうまくいかず、indexが一意ではなく意図しているものが取れない状態に陥りました。
悩んだ私は、APIドキュメントとにらめっこしていると、loop属性にこんな表記がありました。

直訳すると、”ノート:ループモードではアクティブなインデックス値は常にループ/重複スライドの数にシフトされます”。
つまりループを実現させるために、内部でスライダーを二つ・あるいは複数用意しており、それらを切り替えてループしているように見せているわけです。
そのため、どのスライダーを参照しているかによりIndexが一意では無くなってしまうということでした。

これには困りました。どのように現在のスライドを取得すればいいのかわからずIndex周りを探り、
previousIndex(一つ前のスライドのIndex)、clickedIndex(クリックしたIndex)も念のため見てみましたが同じ現象で変わらずでした。


解決策

他に使えそうなメソッドがないかと探していると、clickedSlideというメソッドがあり、
クリックしたスライドのHTMLElementを取得できるようでした。

そこで、各スライドに独自データ属性としてURLを持たせ、JavaScriptから、
mySwiper.clickedSlide.getAttribute(‘data-○○○’)とすると、URLを取得でき、リンクを開くことができました。
もし同じようなことで悩んでる方は一度試してみてください。

まとめ

ここまで一通り説明してみましたが、いかがでしたでしょうか。
この記事を何かの参考にしていただけると幸いです。

このライブラリは非常に使いやすく、動作も軽量なのでオススメです。
ですが、loopでのIndexの扱いには気をつけてくださいね。

これから毎月投稿していくので宜しくお願いします。

弊社開発実績はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*