スライダーを設置するならSwiper.jsが便利
パナソニックコネクティッドソリューションズ労働組合 首都圏支部様のWEBサイトを制作した際に、トップページにスライダーを設置したのですが、会社内のイントラネット環境がナローバンドであったために、スライダー画像を読み込んでから表示するまでに時間がかかり、トップ画面が崩れて表示されるという問題がありました。
※パナソニックコネクティッドソリューションズ労働組合 首都圏支部様のWEBサイトについてはこちら。
この問題を解決してくれたのが、「Swiper.js」というスライダー用のJavascriptになります。
「Swiper.js」を選んだ理由は以下のとおりです。
- jQueryを必要としない軽量なJavascriptであること
- オプションも豊富で企業向けのWEBサイトに設置するスライダーを実現できること
以下に「Swiper.js」の基本的な設置方法を記載します。
サンプルはページネーション、ナビゲーションボタンの表示なし、ページ表示時にスライダーのループ再生が自動で始まするシンプルなスライダーになります。
ライブラリをダウンロードする
ライブラリをGithubよりダウンロードします。 Swiper
ダウンロードした「swiper-master.zip」を解凍します。
swiper-masterフォルダには複数のフォルダとファイルが入っていますが、ここで必要になるのは
dist/css/swiper.min.css
dist/js/swiper.min.js
の２つになります。
cssファイルとjsファイルを設置する
htmlファイルの<head>に以下を記載します。
スライダー用の画像を設置する
htmlファイルの<body>にスライダー用の画像を設置します。
ここで、設定されているクラス名（swiper-container、swiper-wrapper、swiper-slide）はそのまま使うことがポイントです。
swiperを稼働させる
画面表示時にswiperを稼働させるため、以下を記載します。（jQueryを使用した場合の例を記載）
パラメータとして以下を設定しています。
- effect: “fade” スライド切替をフェードイン／フェードアウトに設定
- loop: true ループ再生あり
- autoplay：3000 自動再生あり、画像切替間隔３秒
- preventClicks: false スワイプ中の不要なクリック無効
- preventClicksPropagation: false スワイプ中の不要なクリックイベント無効
※preventClicks:false、preventClicksPropagation:false はスライダー画像にリンクが貼られている状態で、Chrome使用時に画像をClickした際にリンク先にジャンプしない問題の対策のために設定
まとめ
WEBサイトにスライダーを設置する時には基本的に「Swiper.js」を使用しています。
軽量でありながら、オプションも豊富で企業向けのWEBサイトに設置するスライダーを実現するには非常に便利と感じています。
スライダーを設置する際に是非、参考にしてくださいね。