スライダーを設置するならSwiper.jsが便利

パナソニックコネクティッドソリューションズ労働組合 首都圏支部様のWEBサイトを制作した際に、トップページにスライダーを設置したのですが、会社内のイントラネット環境がナローバンドであったために、スライダー画像を読み込んでから表示するまでに時間がかかり、トップ画面が崩れて表示されるという問題がありました。

※パナソニックコネクティッドソリューションズ労働組合 首都圏支部様のWEBサイトについてはこちら


この問題を解決してくれたのが、「Swiper.js」というスライダー用のJavascriptになります。

「Swiper.js」を選んだ理由は以下のとおりです。

  • jQueryを必要としない軽量なJavascriptであること
  • オプションも豊富で企業向けのWEBサイトに設置するスライダーを実現できること

以下に「Swiper.js」の基本的な設置方法を記載します。
サンプルはページネーション、ナビゲーションボタンの表示なし、ページ表示時にスライダーのループ再生が自動で始まするシンプルなスライダーになります。


ライブラリをダウンロードする

ライブラリをGithubよりダウンロードします。 Swiper

Download ZIPからダウンロード

ダウンロードした「swiper-master.zip」を解凍します。



swiper-masterフォルダには複数のフォルダとファイルが入っていますが、ここで必要になるのは

dist/css/swiper.min.css
dist/js/swiper.min.js

の2つになります。

cssファイルとjsファイルを設置する

htmlファイルの<head>に以下を記載します。

スライダー用の画像を設置する

htmlファイルの<body>にスライダー用の画像を設置します。

ここで、設定されているクラス名(swiper-container、swiper-wrapper、swiper-slide)はそのまま使うことがポイントです。

swiperを稼働させる

画面表示時にswiperを稼働させるため、以下を記載します。(jQueryを使用した場合の例を記載)

パラメータとして以下を設定しています。

  • effect: “fade” スライド切替をフェードイン/フェードアウトに設定
  • loop: true ループ再生あり
  • autoplay:3000 自動再生あり、画像切替間隔3秒
  • preventClicks: false スワイプ中の不要なクリック無効
  • preventClicksPropagation: false スワイプ中の不要なクリックイベント無効

※preventClicks:false、preventClicksPropagation:false はスライダー画像にリンクが貼られている状態で、Chrome使用時に画像をClickした際にリンク先にジャンプしない問題の対策のために設定

まとめ

WEBサイトにスライダーを設置する時には基本的に「Swiper.js」を使用しています。

軽量でありながら、オプションも豊富で企業向けのWEBサイトに設置するスライダーを実現するには非常に便利と感じています。

スライダーを設置する際に是非、参考にしてくださいね。