プラグイン（Swiper）を使ってカルーセルを実装する

カルーセル/スライダーについて

Bootstrap講座や、今回の講座素材のポートフォリオサイトでは、Bootstrapのカルーセルを使用しています。

Bootstrapのカルーセルは、左右の切り替えボタン、インジケーター、キャプション有無などが設定できました。

ですが、スライド部分は上図の１パターンのみ。 表示できるのはスライド1枚、それを1つずつスライドしていく仕組みです。

これはBootstrap4系でも5系でも変わりません。

前後のスライドも少し見えるタイプや、サムネイル付きのカルーセル（スライダー）などのバリエーションはありません。 下図のようなスライダーをサイトに載せたいと思った方もいらっしゃるのではないでしょうか。

URL：画像元：https://paypaymall.yahoo.co.jp/

今回は、こういったスライダーを実装できるように、スライダー専用のJavaScriptプラグインを使ってみます。

Swiper.jsを使ってみよう

上図のようなスライダーを簡単に実装できる、Javascriptライブラリ「Swiper.js」を使ってみましょう。 jQuery非依存で、様々なタイプのスライダーのテンプレートがある人気のあるライブラリです。

1. CDNコードを記述する

https://swiperjs.com/にアクセスし、「Get Started」をクリックして下さい。

左のローカルメニューから、Use Swiper from CDNを選択。 下図のように、CDN用のコードが表示されます。

素材のHTMLファイル（advance-thumbs.html）を開いて、貼り付けます。 CSSはhead内でオリジナルCSSの上、JSは</body>の直上あたりが良いでしょう。

advance-thumbs.html

2.HTMLの追加とSwiperの初期化

下準備ができましたので、実際にスライダーになるコードを入れていきます。

2-1. HTMLの追加

Swiperの公式サイトに戻って、CDNコードからスクロールダウンしてください。 「Add Swiper HTML Layout」に基本的なSwiperのレイアウトHTMLが掲載されているので、まるごとコピー。

HTMLファイルで、スライダーを設置したい場所に貼り付けます。 今回は<footer>タグの上にコメントアウトがあるので、そこに貼り付けてください。

advance-thumbs.html

2-2. CSSの追加

公式サイトに戻って、次の項目に進みます。
「Swiper CSS Styles/Size」です。

カスタマイズのためのCSSを追加する必要があるかも、というような説明ですが、デモコードで動かす場合はあったほうが良いです。 ガイトに従って追加してみましょう。

素材には独自CSSのファイル（advance-thumbs.css）がありますので、そちらに貼り付けてみましょう。

advance-thumbs.css

実際にご自身のWebページで使われる場合は、CSSファイルを分ける、HTMLにダイレクトに書く、などでも構いません。 状況に応じて、コードを記述する場所は選択してください。

一旦、ブラウザ表示の方を確認してみましょう。

以下のような、スライダーの枠組みは表示されているはずです。 まだ左右ボタンを押しても、何も起こらないですね。

2-3. Swiperを初期化（JSの追加）

最後に「Initialize Swiper」の項目です。 スライダーを動かすために必要と書かれている、Swiperを初期化するJSをコピーします。

HTMLファイルで、swiperのJSファイル（swiper-bundle.min.js.js）読み込みよりも下の位置に貼り付けます。 貼り付けたコードは上下を<script> と </script>タグで囲んでください。

advance-thumbs.html

上書き保存して、ブラウザをリロード。 JS追加前にはなかった、縦方向のインジケーターが表示されています。

スライダーが動くようになっているか確認してください。

表示スライドは1つだし、縦……と思われるかもしれませんが、そのあたりはカスタマイズできるので問題ありません。 動いていれば正しく導入できているので、次に進んでください。

Swiperの基本構造

Swiperスライダーを実装するために必要なHTML要素、JavaScriptのオプションの役割を見ていきましょう。

どちらも、完全に覚えないと使えない、というものではありません。 自分の実装したいスライダーに近づけられるよう、どこをカスタマイズすればよいか把握できればOKです。

SwiperのHTML構造

Swiperのスライダーを構成するHTMLの構造、クラス名を見ていきましょう。 デモコードはコメントが付いており、クラス名もそのものズバリなので分かりやすいです。

コメントで「If we need（もし必要なら）と」書かれている部分、図の4～6番は非必須。不要なら削除しても問題ありません。

SwiperのHTML、クラスをイチから書ける必要はありません。 最低限必要な要素、見た目をカスタマイズしたいときにCSSセレクタに使うクラス名が分かればOKです。

JSの記述（オプション）について

次に、scriptタグの方を見てください。

公式サイトからコピー・アンド・ペーストしてきたコードは、結構長いですよね。 ですが、最低限必要なのは、下図、赤線で囲った部分（2行）だけ。 この部分で、Swiperの初期化は出来ています。

波括弧{ } の内側に書かれているのは、オプションと呼ばれている部分。 Swiperが用意してくれているパラメータと値を入力することで、「スライドの向きは縦方向」や「ナビゲーションを表示する」など、どんなスライダーにしたいのか指定できます。

試しに、コピーしてきたコードを変えてみましょう。 以下の2つパラメータと値をコメントアウトします。

• direction（verticalで、スライドを垂直方向に指示）
• scrollbar（swiper-scrollbarクラスの要素にスクロールバーを表示する）

スクロールバーなし・横スライドのスライダーになる……かと思いきや、スライダーっぽいものは表示されたまま。

これはHTMLでdiv.swiper-scrollbarが残っているためです。 HTMLでスクロールバーのベースになる薄灰色の部分、JSで現在位置である青色の部分を作っている形です。

HTML要素のdiv.swiper-scrollbarもコメントアウトします。

よくあるシンプルなスライダーへ、変更できました。

Swiperオプションの調べ方

Swiperオプションで使えるパラメータと、パラメータ値の書き方はSwiper公式サイトの中の“Swiper API”ページで確認できます。 左のローカルメニューからParametersを選ぶと、パラメータ一覧が表示されます。

Swiper公式サイト / Swiper API
https://swiperjs.com/swiper-api#parameters

また、モジュールと呼ばれるスライダーの構成パーツには、それぞれ更に細かなオプション設定も用意されています。

左メニュー“Modules”のグループで確認できます。 Modules > Pagination（ページネーション）を見てみましょう。

https://swiperjs.com/swiper-api#pagination

赤い点線で囲った部分は、ページネーションの ● をクリックして、スライドを切り替えられるかの設定。 デフォルトでは false（操作できない）になっています。

操作可能になるようtrueに変更してみましょう。 既存の pagination: {} の中に、半角カンマで区切って追加します。

// If we need pagination
pagination: {
    el: '.swiper-pagination',
    clickable: true, 
},

※デモは別ファイルですが、そのままadvance-thumbs.htmlでお試しください。

このように、必要な機能を追加・削除していくことで、様々なバリエーションのスライダーを作成できることがSwiperの特徴です。

ただ、パラメータを逐一探して書いていくのは、ちょっと面倒。 次回のレッスンでは、公式が用意しているデモを活用しつつ、作りたいデザインのスライダーへカスタマイズする方法を解説します。

実習

CDN版のSwiperを導入し、スライダーを動かしてみましょう。
本レッスンで紹介した、Getting Startedページに掲載されているコードのスライダーを実装してください。

オプション部分（スクロールバーを横にする、ページネーションの ● からも操作可能にする、など）は設定してもしなくても構いません。