Swiper.jsでカルーセルを実装しよう

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. Swiper.jsでカルーセルを実装しよう

Swiper.jsでカルーセルを実装しよう

Swiper.jsでカルーセルを実装しよう

カルーセル(スライダー)はホームページの定番なインタラクティブ要素ですよね。
ライブラリも多くどれを使えば良いのかわからない人に、まずはSwoper.jsを使ってみてはどうでしょうか。

今回はSwiper.jsの紹介をしたいと思います。

Swiper.jsとは

Swiper.jsはカルーセル(スライダー)を作成するJavascriptライブラリです。
レスポンシブ対応し、jQueryに依存していないライブラリとして好んで使われることが多いと思います。

Swiper.js公式ページ

公式のデモページはサンプルが多く、実装の参考になります。

https://swiperjs.com/demos

余談ですが、私は以前まではjQuery依存のslick.jsを使っていました。
こちらも負けず劣らず優秀なカルーセルのJavascriptライブラリなのですが、jQueryに依存していること、またカルーセルのマークアップが変更されるといった点が気になっていたので、その点が解消されるSwiper.jsに切り替えました。

Swiper.jsライブラリの使い方

ライブラリの読み込み

Swiper.jsを使うのに、まずはライブラリを読み込みます。
HTMLに直接記述する方法とnpmでインストールする方法と2つ紹介します。

HTMLで読み込む

JavascriptとCSSをそれぞれ<script>タグと<link>タグで読み込みます。

npmでインストール

webpackなどのバンドラーでJSをバンドルしている場合は、npmでインストールすることでライブラリを他のJSとまとめることができます。

CSSのバンドル

webpackにバンドルする場合、CSSもまとめてバンドルしておきたいので、「style-loader」と「css-loader」もnpmでインストールしておくと良いでしょう。
(私の環境では別途、babelもインストールしています。)

インストールが完了したら、webpack.config.jsの module -> rules に以下を追記します。

ライブラリの読み込み

ライブラリを使う準備が整いましたので、最後にJSファイルでライブラリを読み込みます。

補足

Swiperはナビゲーションやページネーション、切り替わりのエフェクトなどは、モジュールとして追加で読み込む必要があります。

また、以下のよう書くと、全てのモジュールをまとめて読み込めます。

HTML

Swiper.jsはカルーセルにしたいHTML要素にクラスを付与します。
以下を参考に、クラスを追加してください。

<!– Slides –>とコメントのある部分がカルーセルになる要素の集まりです。
ページネーションやナビゲーションが必要ない場合はその部分のHTMLは不要です。

Javascript

Swiperの初期化時に必要なオプションを指定することで、カルーセルをカスタマイズできます。

new Swiperの第1引数にカルーセルの一番親となる要素のセレクタを指定し、第2引数のオブジェクトにオプションを追加してきます。
指定できるパラメーターは公式を参考にすると良いでしょう。

レスポンシブ対応

レスポンシブ対応を1つ例にあげてみます。

レスポンシブはブレークポイントのオプションを使います。
オブジェクト形式で、キーにブレークポイントを指定し、値のオブジェクトはブレークポイント時に適用するオプションをそれぞれ指定します。
上記の例だと、768未満はカルーセルは1枚だけ表示、768px〜979pxは2枚、980px〜1199pxは3枚、1200px以上は4枚といった風にレスポンシブ対応できます。

Swiper.jsの無効化、有効化の切り替え

上記のレスポンシブの例だと、カルーセル自体は機能したまま、オプションを切り替えることは可能ですが、そもそもカルーセル自体をなくしたいと言った時は、Swiper.jsを無効化する必要があります。
例えば、デスクトップの表示ではカルーセルではなく、Flexboxで並べて表示し、モバイルではカルーセルにしたいというような場合ですね。
そういった場合は下記のようにjavascriptのmatchMediaを利用して、Swiperを無効にしたり、初期化し直したりします。

ポイントとなる部分ですが、

1つ目は、Swiperの初期化時に「init: false」のオプションを指定します。
initはSwiperの初期化時にカルーセルを自動で有効化するかしないかを指定するパラメータです。
デフォルトはtrueになっていますが、デスクトップの表示の場合はカルーセルは無効にしておきたいので、falseにしておきます。

2つ目のポイントはmatchMediaです。
モバイル(599px以下)とデスクトップで処理を切り替えるために「matchMedia(‘(max-width: 599px)’)」メソッドを使います。

mediaQuery変数にmatchMediaの関数を代入し、Swiperの初期化完了時と、matchMediaのイベント監視で、ブレークポイントが切り替わったタイミングでhandle関数を実行するようにしています。
mediaQueryはmatchesのプロパティを持っており、ブレークポイントが切り替わった際に、指定したメディアクエリの条件とマッチしていればtrueを、そうでなければfalseを返します。

mq.matchesがtrueの場合、Swiperのinitメソッドを実行してカルーセルを有効化します。
falseの場合は、かつカルーセルが有効になっている場合は、Swiperのdestroyメソッドを使い、カルーセルを無効化します。
カルーセルが有効になっていない時にdestroyを実行するとエラーになるので、isSlideでカルーセルの有効、無効状態のフラグ管理をしています。

Swiper.jsのIE対応

便利なSwiper.jsですが、5系より上のバージョンはIE11には対応していません。
IE対応が必要な場合は4系の最新バージョンを使いましょう。

4系だと利用できないオプションや機能がありますが、インストールや基本的な使い方は同じなので、上記で紹介した方法でほとんど利用できます。

さらにwebpackでバンドルしている場合、IEだとシンタックスエラーとなってしまうので、下記の様な対応が必要です。

webpackの除外設定からSwiper関連を除外しないようにする必要があるようです。

上記の情報は下記サイトを参考にさせていただいています。

【JS】スライダーのSwiperをwebpackで利用する場合

最後に

Swiper.jsはオプションも豊富に用意されています。さらにここでは紹介しませんでしたが、APIを利用することで、さらに柔軟なカスタマイズも可能になります。

新しいカルーセルのライブラリを探している方や、昔からの古いライブラリを利用している方は一度試してみてはいかがでしょうか。

前後の記事

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら