カルーセル（スライダー）はホームページの定番なインタラクティブ要素ですよね。
ライブラリも多くどれを使えば良いのかわからない人に、まずはSwoper.jsを使ってみてはどうでしょうか。
今回はSwiper.jsの紹介をしたいと思います。
Swiper.jsはカルーセル（スライダー）を作成するJavascriptライブラリです。
レスポンシブ対応し、jQueryに依存していないライブラリとして好んで使われることが多いと思います。
公式のデモページはサンプルが多く、実装の参考になります。
余談ですが、私は以前まではjQuery依存のslick.jsを使っていました。
こちらも負けず劣らず優秀なカルーセルのJavascriptライブラリなのですが、jQueryに依存していること、またカルーセルのマークアップが変更されるといった点が気になっていたので、その点が解消されるSwiper.jsに切り替えました。
Swiper.jsを使うのに、まずはライブラリを読み込みます。
HTMLに直接記述する方法とnpmでインストールする方法と２つ紹介します。
JavascriptとCSSをそれぞれ<script>タグと<link>タグで読み込みます。
|
1 2 |
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> |
webpackなどのバンドラーでJSをバンドルしている場合は、npmでインストールすることでライブラリを他のJSとまとめることができます。
|
1 |
npm install --save-dev swiper |
webpackにバンドルする場合、CSSもまとめてバンドルしておきたいので、「style-loader」と「css-loader」もnpmでインストールしておくと良いでしょう。
（私の環境では別途、babelもインストールしています。）
|
1 |
npm install --save-dev style-loader css-loader |
インストールが完了したら、webpack.config.jsの module -> rules に以下を追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const webpack = require('webpack'); module.exports = { module: { rules: [ { { test: /\.css/, use: [ "style-loader", { loader: "css-loader", options: { url: false } } ] } } ] } } |
ライブラリを使う準備が整いましたので、最後にJSファイルでライブラリを読み込みます。
|
1 2 3 4 5 6 7 |
// import Swiper JS import Swiper from 'swiper'; // import Swiper styles import 'swiper/swiper-bundle.css'; const swiper = new Swuper(...); |
Swiperはナビゲーションやページネーション、切り替わりのエフェクトなどは、モジュールとして追加で読み込む必要があります。
|
1 2 3 4 5 6 7 |
// core version + navigation, pagination modules: import SwiperCore, { Navigation, Pagination } from 'swiper/core'; // configure Swiper to use modules SwiperCore.use([Navigation, Pagination]); const swiper = new Swiper(...); |
また、以下のよう書くと、全てのモジュールをまとめて読み込めます。
|
1 2 3 4 5 |
// import Swiper bundle with all modules installed import Swiper from 'swiper/bundle'; // init Swiper: const swiper = new Swiper(...); |
Swiper.jsはカルーセルにしたいHTML要素にクラスを付与します。
以下を参考に、クラスを追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div> |
<!– Slides –>とコメントのある部分がカルーセルになる要素の集まりです。
ページネーションやナビゲーションが必要ない場合はその部分のHTMLは不要です。
Swiperの初期化時に必要なオプションを指定することで、カルーセルをカスタマイズできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
const swiper = new Swiper('.swiper-container', { // Optional parameters direction: 'vertical', loop: true, // If we need pagination pagination: { el: '.swiper-pagination', }, // Navigation arrows navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // And if we need scrollbar scrollbar: { el: '.swiper-scrollbar', }, }); |
new Swiperの第１引数にカルーセルの一番親となる要素のセレクタを指定し、第２引数のオブジェクトにオプションを追加してきます。
指定できるパラメーターは公式を参考にすると良いでしょう。
レスポンシブ対応を１つ例にあげてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const swiper = new Swiper('.swiper-container', { slidesPerView: 1, breakpoints: { 768: { slidesPerView: 2 }, 980: { slidesPerView: 3 } 1200: { slidesPerView: 4 } }); |
レスポンシブはブレークポイントのオプションを使います。
オブジェクト形式で、キーにブレークポイントを指定し、値のオブジェクトはブレークポイント時に適用するオプションをそれぞれ指定します。
上記の例だと、768未満はカルーセルは１枚だけ表示、768px〜979pxは2枚、980px〜1199pxは3枚、1200px以上は4枚といった風にレスポンシブ対応できます。
上記のレスポンシブの例だと、カルーセル自体は機能したまま、オプションを切り替えることは可能ですが、そもそもカルーセル自体をなくしたいと言った時は、Swiper.jsを無効化する必要があります。
例えば、デスクトップの表示ではカルーセルではなく、Flexboxで並べて表示し、モバイルではカルーセルにしたいというような場合ですね。
そういった場合は下記のようにjavascriptのmatchMediaを利用して、Swiperを無効にしたり、初期化し直したりします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
const slider = document.querySelector('[data-slide]'); let isSlide = false; const outlineSwiper = new Swiper(slider, { init: false, speed: 1800, loop: true, effect: 'fade', fadeEffect: { crossFade: true }, autoplay: { delay: 2000, disableOnInteraction: false, }, }); const mediaQuery = matchMedia('(max-width: 599px)'); function handle(mq) { if (mq.matches) { slider.init(); isSlide = true; } else if (isSlide) { slider.destroy(false,true); } } slider.on('init', handle(mediaQuery)); mediaQuery.addListener(handle); |
ポイントとなる部分ですが、
１つ目は、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ですが、5系より上のバージョンはIE11には対応していません。
IE対応が必要な場合は４系の最新バージョンを使いましょう。
4系だと利用できないオプションや機能がありますが、インストールや基本的な使い方は同じなので、上記で紹介した方法でほとんど利用できます。
さらにwebpackでバンドルしている場合、IEだとシンタックスエラーとなってしまうので、下記の様な対応が必要です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// 抜粋 module: { rules: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/, options: { presets: [ [ 'env', { modules: false } ] ] } } ] } |
webpackの除外設定からSwiper関連を除外しないようにする必要があるようです。
上記の情報は下記サイトを参考にさせていただいています。
【JS】スライダーのSwiperをwebpackで利用する場合
Swiper.jsはオプションも豊富に用意されています。さらにここでは紹介しませんでしたが、APIを利用することで、さらに柔軟なカスタマイズも可能になります。
新しいカルーセルのライブラリを探している方や、昔からの古いライブラリを利用している方は一度試してみてはいかがでしょうか。
