Swiper V8の使い方「レスポンシブ等の具体例」とオプション解説

2022年05月10日／ 2021年1月21日

jQueryを使わないスライダー「Swiper」の使い方と、オプションの解説を日本語でわかりやすく解説ほしい！

WEB制作に欠かせない画像スライダー、有名なモノで言えば「bxSlider」や「slick」などが人気があるが、今はjQueryを使わないスライダ「Swiper」がスタンダードとなりつつある。

今回はSwiper公式サイトでは英語でしか解説していない「Swiperバージョン８」の使い方とオプションによるカスタマイズ方法を、日本語で具体例や図を交えながら、丁寧に解説していこう。

Swiper.jsはなぜ人気があるのか？

Swiper.jsは前述したように「bxSlider」や「slick」と並んでトップ３に入る人気なのだが、Swiper.jsが愛されている理由である、その「メリット・デミリット」を見ていこう！

Swiperのメリット

jQuery読込み不要なので軽量、脱jQuery派の人にはもってこい
オプションやコールバック関数がめちゃくちゃ多く、カスタマイズ性に優れている
レスポンシブ対応していて、スマホイベントのタッチ、スワイプ、タップなども使える

Swiperのデメリット

古いブラウザには対応していない
Swiper バージョン5以降はIE対象外
公式ドキュメントは英語のみ

つまり、モダンブラウザを対応するのであれば、カスタマイズ性に優れていて、脱jQueryで軽量化できる「Swiper」は、現時点では最強なのかもしれない。

IEの対応について

Swiperバージョン5以降はIE対象外となっている（IEは正式にサポート終了勧告が出ている（マイクロソフト公式：Windows10 IE11は2022年6月15日サポート終了）ので、切捨てで良いのではないだろうか。

IE対応が必要な場合は、Swiperのバージョン4をダウンロード（Download Latest Swiper 4.5.3）して使うかCDNを利用すると良い。

Swiperバージョン4のCDNの記述例

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css>
</head>
<body>
〜中略〜
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
</body>

※V5以降にしかないオプションを利用するとエラーになる場合があるので注意。

【STEP１】 Swiper（バージョン8）のダウンロード

まずはSwiperに必要なファイルをダウンロードしよう。

ダウンロード場所

Swiperのダウンロードはこちらからで「バージョンを指定して」ダウンロードできる。

ダウンロードページの位置は、Swiper公式サイトのトップページの「Get Started」をクリックし、Get Startedページをスクロールして「Download assets」部分にあるダウンロードリンクをクリック↓

ダウンロードページでバージョンを選択して必要なファイルだけダウンロードすれば良い↓

Swiperで最低限必要なファイル

ダウンロードページから落とす最低限必要ファイルは、JSとCSSファイルの２つだけ。

swiper-bundle.min.jsとswiper-bundle.min.css（もしくは swiper.min.css）をダウンロード。

swiper-bundle.min.cssはある程度装飾がついている版のCSSで、swiper.min.cssは最低限の装飾版のCSSという感じなので、どちらか１つを使えば良い。

この２ファイルを任意の場所に格納し、次のように自分が格納した場所を指定して読み込んでおこう。

swiper-bundle.min.jsは、必ずbodyの閉じタグの直前で読み込む。

<head>
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
</head>
<body>
<!-- 中略（コンテンツ部分）〜 -->


<!-- ↓body閉じタグの直前 -->
<script src="./js/swiper-bundle.min.js"></script>
</body>

Swiper.jsをCDNで読み込む場合

ダウンロードが面倒でCDNで読み込みたい人は、最新版のCDNをこちらのhttps://swiperjs.com/get-started#use-swiper-from-cdnからからコピーしてきて読み込もう。

https://unpkg.com/swiper@8/swiper-bundle.min.css https://unpkg.com/swiper@8/swiper-bundle.min.js

CDNで読み込む例

<head>
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
</head>
<body>


<!-- ↓body閉じタグの直前 -->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
</body>

【STEP２】 SwiperのHTMLの基本の記述

まずはHTMLのスライダ部分の基本の記述を確認していこう。

HTML

<div class="swiper">
   <div class="swiper-wrapper">
     <div class="swiper-slide"><img src="image1.jpg"></div>
     <div class="swiper-slide"><img src="image2.jpg"></div>
     <div class="swiper-slide"><img src="image3.jpg"></div>
   </div>
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>
</div>

HTMLの解説

一番外側に全体を囲う<div class="swiper">を設定（このクラス名は任意で、jsの初期設定時にクラス名を指定）。

その内側にスライドする複数の画像を囲う<div class="swiper-wrapper">を設置。

それぞれの画像は<div class="swiper-slide">で囲うのが基本の構成。

ナビゲーションは、それぞれswiper-button-prevとswiper-button-nextというクラスの「空DIV」を入れれば、基本構成は完成。

CSSでサイズ調整

全体を囲う<div class="swiper">をCSSで調整する事で、スライダーをサイズを設定する。

.swiper{
   width: 1000px;
   height: 400px;
}

【STEP３】 Swiperの初期設定のJavaScript記述

JavaScriptはbodyの閉じタグの直前に次のように記述する。（※bodyの閉じタグの直前でないと動かない場合がある）

最低限のJavaScript

<script src="./js/swiper-bundle.min.js"></script>
<script>
      const swiper = new Swiper('.swiper');
</script>
</body>

これで一応、最低限の機能で動くスライダーの完成だ。ただし、本当に最低限の機能「イメージを左右にマウスなどでドラックすれば動く」という状態であり、左右の矢印ナビゲーションや、自動再生などは機能しない状態。

この状態のデモを見てみよう。　→Swiper 最低限の状態 DEMO

基本設定のJavaScriptの解説

基本設定のJavaScriptの書き方を解説すると、ダウンロードしてきたswiper-bundle.min.jsを読み込んだ以降の行に<script></script>で囲った中でJavaScriptを記述する。（※swiper-bundle.min.jsの読み込みを先に記述しなければならない）

const swiper = new Swiper('.swiper');

このようにconst swiperという記述で変数「swiper（任意の名前）」を定義し、new Swiper('.swiper')として記述し、その()中に'.swiper'という形式で、HTML上の外側につけたクラス名を記載する形が基本形。

これで変数名「swiper」という名前のスライダーが動くようになる。

Swiperで左右のナビゲーションを有効化する

左右の矢印ナビゲーションが機能するようにするには、オプションで記述する必要がある。デフォルトで用意されている左右のナビゲーション機能を有効にする記述を見ていこう。

左右ナビを有効化したJavaScript

<script src="./js/swiper-bundle.min.js"></script>
<script>
      const swiper = new Swiper('.swiper', {
      navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
  }
});
</script>
</body>

このように書く事で、左右のナビゲーションが機能しクリックすると次のスライドに移動するはずだ。

この状態のデモを見てみよう。　→Swiper DEMO

左右のナビを有効化したJavaScriptの解説

先ほどnew Swiper('.swiper');と記述した()内で,で区切ったあとに{}で左右のナビを有効化するオプションを記載していく。

const swiper = new Swiper('.swiper', {
　//ここにオプションを記述
});

各オプションには、記述の仕方に決まりがあり、ナビゲーションの場合はnavigation: {}とし{}内で左右の矢印についているクラスを指定する形だ。

では、オプションの書き方を見ていこう。

Swiperのオプションの書き方

Swiperのオプションの書き方は「パラメータ」と「値」を:（コロン）で区切って記述し、次のパラメータを,（カンマ）で区切る

パラメータ: 値,
パラメータ: 値,

の形で書き、さらに個別に詳細設定があるものは、{}を使って入れ子形式で書く必要がある。

パラメータ1: 値,
パラメータ2:{
   パラメータ2-1:値,
   パラメータ2-2:値,
},
パラメータ3: 値,
パラメータ4: 値,

注意点

「値」を記述する際はtrueやfalseや数字以外は""か''で囲う必要がある。

オプションの使い方とカスタマイズの具体例

ではオプションの書式を確認しながら具体例を見ていこう。

const swiper = new Swiper('.swiper', {
　loop: true,
  direction:'vertical',
  navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
  }
});

ちなみにこれはloop: true,で「ループさせる」、direction:'vertical',で「縦方向にスライド」　、navigation: {〜}は入れ子でそれぞれnextElは「次へボタン」prevElは「前へボタン」につけるクラスを指定する事で、ナビゲーションとして機能する事になる。

各オプションの説明は、記事の後半に一覧を記載。

レスポンシブの設定の仕方

Swiperでのレスポンシブの設定方法は、簡単に言うとオプションで「ブレイクポイント」を設定し、ブレイクポイント毎にオプション設定を変えるという方法だ。

つまり例えば

画面サイズが「768px未満の場合画像は1枚表示」に、「768px以上980px未満の場合は画像２枚表示」に、「980px以上は画像3枚表示に」変えるといったやり方だ。もちろん画像の枚数だけでなく、全てのオプションを画面サイズ毎に変える事ができる。

具体的にはオプションの設定時に、breakpoints: {〜}の中に入れ子で768: {任意のパラメータ: 値,}のようにブラウザの幅（px）を小さい順に設定し、それぞれで任意のオプションを設定していくというやり方。同じオプションを別のブレイクポイントで設定すると上書きされる。

const swiper = new Swiper('.swiper', {
  slidesPerView: 1,
  breakpoints: {
    // 768px以上の場合
    768: {
      slidesPerView: 2,
    },
    // 980px以上の場合
    980: {
      slidesPerView: 3,
    },
    // 1200px以上の場合
    1200: {
      slidesPerView: 4,
    }
  }
})

レスポンシブのコード解説

この例では、768px以下ではslidesPerView: 1が適用され、768以上〜979px以下ではslidesPerView: 2を適用、980px以上〜1199px以下では、slidesPerView: 3を適用、1200px以上はslidesPerView: 4が適用されるという仕組み。

１画面に複数枚表示するカルーセルタイプにする方法

画像のスライドショーには、常に１枚だけの画像がスライドして変化するタイプと、一度に複数枚見えているタイプがある。

一度に複数枚見えている「カルーセルタイプ」を実現する方法はとても簡単でslidesPerViewのオプションに、任意数字を入れるだけだ。

JavaScript

<script>
   const swiper = new Swiper('.swiper', {
      slidesPerView:3,
      navigation: {
         nextEl: '.swiper-button-next',
         prevEl: '.swiper-button-prev',
      }
   });
</script>

注意点

slidesPerViewを使ってカルーセルタイプにする場合effectオプションが"fade""cube" "flip"の場合は、カルーセルにならないので注意が必要。

カルーセルで現在（カレント）のスライドを真ん中にする方法

カルーセルタイプのスライドにおいて、現在のスライド（カレント）を中央に配置する方法は、オプションのcenteredSlidesをtrueにするだけでOK!

slidesPerView:3,
centeredSlides:true,

※真ん中という特性上、slidesPerViewの値は3以上である必要がある。

現在（カレント）のスライドだけ、見た目の変化をつける方法

現在のスライドがどのスライドか、視覚的に変化をつけたい場合は、カレントスライドに自動的に付与されるクラスswiper-slide-activeに任意のCSSを適用させれば良いだけ。

CSSの例

.swiper-slide-active{
    opacity: 0.5;
}

現在アクティブなスライダの左右を「はみ出して」見せる（見切れさせる）方法

スライダの左右に「一つ前のスライダ」と「次のスライダ」を少しだけ見せたい場合の方法は、実はとても簡単な方法で実装可能だ！

centeredSlides:true,にした上でslidesPerViewオプションの値を、次のように見切れさえたい割合の分だけ「少数点」で数字を入れるだけなのだ！！

centeredSlides:true,
slidesPerView:1.2,

この場合1.2なので（左右の合計が）「2割」だけ見切れて見えるという事になる。（少数が使えるなんて盲点だった。）

もちろん次のように１枚のスライドの場合だけでなく、3枚以上の数にも適用される（中央にする意味でも少数の前の数字は「奇数」にしておく必要がある。）

centeredSlides:true,
slidesPerView:3.5,

この場合、見切れている（左右の合計）サイズが、各スライドの幅の５割だけ、見切れて見えている事になる。

サムネイル付きのスライダーにする方法

Swiperで「サムネイル付きスライダー」を実装する方法は、HTML上ににスライダーを２つ用意して、その２つのスライダーを連携させるという方法をとる。

今回作るサムネイル付きスライダーは上の図のような形で、メインのスライダーを動かしたら、該当のサムネイルも中央に移動して表示するというもの。

今回解説するのはこのようなスライダー→サムネイル付きスライダーのデモがこちら

ではこのデモを、具体的にソースコードを交えて解説していこう。

HTML

<div class="mainslider">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./images/nature-1.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/nature-2.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/nature-3.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/nature-4.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/nature-5.jpg" alt=""></div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
</div>
<div class="thumbnail">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./images/nature-1.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/nature-2.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/nature-3.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/nature-4.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/nature-5.jpg" alt=""></div>
        </div>
</div>

まずはこのように、通常のSwiper用のスライダーを２つ用意して、それぞれメインのスライダーには.mainsliderサムネイル用のスライダーには.thumbnailというクラスをつける（任意の名前）

サムネイル付きスライダーのJavaScript

//スライダー
const mainSlider = new Swiper('.mainslider', {
  centeredSlides: true,
  loop:true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

//サムネイル
const Thumbnail = new Swiper('.thumbnail', {
  centeredSlides:true,
  loop:true,
  slidesPerView: 5,
  slideToClickedSlide: true,
});

// スライド遷移時にイベントが発生する slideChange というAPIを使用
// スライダーをスライドした時にサムネイルを移動させる
mainSlider.on('slideChange', () => {
    // realIndex は現在activeになっているスライドの番号が入っている
    Thumbnail.slideToLoop(mainSlider.realIndex);
});
// サムネイルをスライドした時にメインスライドを連動させる(上記と逆)
  Thumbnail.on('slideChange', () => {
    mainSlider.slideToLoop(Thumbnail.realIndex);
});

JavaScript設定では、それぞれのスライダーの基本の初期設定（ここでは変数名「mainSlider」と「Thumbnail」という任意の名前で作成）を済ませた上で、両方のスライダーにcenteredSlides: true,とloop:true,を設定。

サムネイル側のスライダーにはさらにslidesPerView: 5,（サムネイルの数） slideToClickedSlide: true,を設定して基本の設定は完了。

スライダーの連携方法

Swiperのバージョンにもよるが、２つのスライダーを連携する方法がいくつかあり、今回はSwiper.jsに用意されている「API」を使って簡単に実装する方法を解説しよう。

APIを使ったスライダーの連携

APIを使ったスライダー連携方法とは、「メインスライダーを動かした瞬間に、メインスライダーの現在表示している番号を取得して、サムネイル側のスライダーの同じ番号のスライドを表示させる」と指示するというイメージ。

では、早速こちらのコードの解説。

mainSlider.on('slideChange', () => {
    Thumbnail.slideToLoop(mainSlider.realIndex);
});

mainSlider.on('slideChange', () => {〜});でmainSliderの「スライドが切り替わるタイミング」のイベントが利用できる。

Thumbnail.slideToLoop(数字)でThumbnailという名前のスライドが「指定の数字」の順番のスライドに切り替わえる事ができる関数。

数字の代わりに入っているmainSlider.realIndexではmainSliderで現在アクティブになっているスライド番号を取得できるので、その取得した番号と同じ番号のスライドに切り替える事ができるという仕組み。

次にこちらのコードの解説だが、基本的に上記と同じ仕組みを、逆のパターンでやっているだけ。

Thumbnail.on('slideChange', () => {
    mainSlider.slideToLoop(Thumbnail.realIndex);
});

これで「どちらかのスライダーが切り替わったら、もう一方のスライダーが同じ番号のスライダーを表示する」という仕組みが出来上がる！

Swiperの各オプションパラメータの説明と使い方

次はSwiperの各オプションの内容一覧表を作ったので、こちらを参考にSwiperをカスタマイズしていこう。

「パラメータ：値」のように１セットで設定できるものと、「詳細設定が必要なもの」で分けて解説しよう。

パラメータ	デフォルト値	説明
initialSlide	0	最初に表示させるスライド番号（0からの数字で記述）
direction	'horizontal'	スライドする方法。'horizontal'（横）か'vertical'（縦）
speed	300	スライドが切り替わるアニメーションの速度（ミリ秒）
setWrapperSize	false	全てのスライドの合計サイズが、.Swiper-wrapperのサイズにセットされる（幅・高さ共に）
width	なし	スライドの横幅のpx指定。（設定するとレスポンシブ機能はなくなる）
height	なし	スライドの高さのpx指定。（設定するとレスポンシブ機能はなくなる）
autoHeight	false	.Swiper-wrapperの高さが、各スライドの高さに合わせてスライド毎に自動調整する
roundLengths	false	スライドの幅や高さによって、画像やテキストがボヤけるのを四捨五入でサイズ調整して防止する
nested	false
uniqueNavElements	true	コントロール関連のprev/nextや.paginationやscrollbarなどと、スライダーの動きを連動させる
effect	'slide'	スライドの動きのエフェクトを設定（"slide", "fade", "cube", "coverflow" , "flip"）
runCallbacksOnInit	true
watchOverflow	false	スライドが１枚の時に、コントロール関連のボタン類を非表示にする
cssMode	false	trueにすると最新のCSS Scroll Snap APIが使用され、パフォーマンスが上がるが、全ての機能がサポートされていない。
spaceBetween	0	スライド同士の距離を設定（cssでmarginを使っている場合は、ナビゲーションが機能しない場合がある）
slidesPerView	1	1画面に見えるスライドの数を設定（カルーセル指定）。slidesPerView:autoとslidesPerColumnを同時に設定してはいけない。「effect」が"slide"か"coverflow"以外の時は動作しない。
slidesPerColumn	1	複数行レイアウトの場合、列あたりのスライド数
slidesPerColumnFill	'column'	slidesPerColumnを指定時に、列（’column’）ベースにするか、行（’row’）ベースにするか指定
slidesPerGroup	1	１以上の数を指定すると、その数のスライドがグループ化されて、同時にスライドする
slidesPerGroupSkip	0	slidesPerGroupでグループする場合、グループ化から除外するスライドを指定する。指定した数字以降のスライドは、グループされる。（roopには対応していない？）
centeredSlides	false	slidesPerViewの値が3以上のカルーセルタイプのスライドで、最初のスライド（アクティブなスライド）をセンターにする
centeredSlidesBounds	false	カルーセルタイプのスライダにおいて、centeredSlidesがtrueの場合、最初と最後のスライダが空白にならないように、調整する。（※roopがtrueの場合は意味がない）
slidesOffsetBefore	0	表示されているスライドの「最初のスライド」を指定の数字のpxの幅だけ、余白を入れる（※両サイドに前後のスライドを表示するものでない）
slidesOffsetAfter	0	表示されているスライドの「最後のスライド」を指定の数字のpxの幅だけ、余白を入れる（※両サイドに前後のスライドを表示するものでない）
grabCursor	false	カーソルを矢印ではなく、グローブカーソルに変更する
touchEventsTarget	'container'	タッチイベントの対象を、containerにするかwrapperにするかの２択で選ぶ
touchRatio	1	どれくらいスワイプすると、次のスライドへ進むかを指定。数字が大きければ、少しのスワイプで次のスライドに進む。
touchAngle	45	スワイプする時に、横方向のスワイプだと認識する角度を指定
simulateTouch	true	タッチイベントをマウスイベントのように受け入れる
shortSwipes	ture	短い時間のスワイプを有効にする
longSwipes: true	ture	長い時間のスワイプを有効にする
longSwipesRatio	0.5	長い時間のスワイプ時に、次のスライドがどれだけ見えたら、スライドを遷移させるかの設定
longSwipesMs	300	長い時間のスワイプ時に、どれくらい時間をかけてスライドしたら、スライドをキャンセルするかの設定。（ミリ秒）
followFinger	true	スワイプさせた時に、バウンドするようにその次のスライドが少し見える演出をさせる
allowTouchMove	true	スワイプイベントを可能にする
threshold	0	スワイプ時に次のスライドへ遷移させる場合の、最低限のスワイプ距離。指定の数字よりも距離が短い場合は、スライダーは遷移しない。
touchMoveStopPropagation	true	イベントバブリングを防ぐ（イベントが発生した時に、イベント発生した親要素や祖先要素にも同じイベントが発生するのを防ぐ）
iOSEdgeSwipeDetection	false	iOSのUIWebViewでのスワイプイベントを有効にする
iOSEdgeSwipeThreshold	20	iOSのUIWebViewにて、設定した数値より画面左端から小さい範囲では、スワイプのイベントが有効にならない。
touchReleaseOnEdges	false	スワイプでのスライド時に、同時に画面がスクロールされるのを許可する
passiveListeners	true	スマホのパフォーマンスを高める。（e.preventDefaultを使う場合は、競合してしまうのでfalseにする）
resistance	true	最初や最後のスライド時にその次に遷移しようとする時に、バウンドする演出をさせる。(roop時は無効）
resistanceRatio	0.85	resistanceのバウンドする抵抗力の強弱を設定
preventInteractionOnTransition	false	スライドの切り替わり中は、スワイプやナビゲーションやページネーションで別のスライドに切り替えができなくなる
allowSlidePrev	true	一つ前のスライドへ切り替えを許可
allowSlideNext	true	次のスライドへの切り替えを許可
noSwiping	true	noSwipingClassで指定したクラスがついたスライドはスワイプの操作ができなくなる
noSwipingClass	'Swiper-no-swiping'	指定したクラス名をつけたスライドは、スワイプできなくなる。（noSwipingがtrueの場合のみ）
noSwipingSelector		セレクタを指定すると、そのセレクタ上ではスワイプ操作ができなくなる
swipeHandler	null	指定したセレクタ上でしかスワイプ操作ができなくなる
preventClicks	true	スワイプ中にクリックができなくなる
preventClicksPropagation	true	スワイプ中にクリックイベントを無効にする
slideToClickedSlide	false	スワイプ中に別のスライドをクリックした時に、スライドを変更が可能になる
freeMode	false	スライドした際に特定のスライドにピタッと止まらなくなり、滑るようにスライドする。
freeModeMomentum	true	スライド時に惰性でしばらく動く（freeMode: trueが前提）
freeModeMomentumRatio	1	数字が大きいほど惰性スクロールの距離が伸びる（freeMode: trueとfreeModeMomentum:trueが前提）
freeModeMomentumVelocityRatio	1	数字が大きいほど惰性スクロールのスピードが速くなる（freeMode: trueとfreeModeMomentum:trueが前提）
freeModeMomentumBounce	true	最後のスライドに行った際にバウンドするアニメーションをする（freeMode: trueとfreeModeMomentum:trueが前提）
freeModeMomentumBounceRatio	1	上記freeModeMomentumBounceのバウンドの大きさ
freeModeMinimumVelocity	0.02	freeModeを開始するトリガー的スワイプの最小速度の設定
freeModeSticky	false	惰性が終わって止まる時に一番近くのスライドにスナップする
watchSlidesProgress	false	各スライドの進行状況を計算
watchSlidesVisibility	false	スライドに追加の表示クラスが付与される
preloadImages	true	事前にスライドの画像を読み込んでおく
updateOnImagesReady	true	画像を全て読み込んだらスライドを初期化
loop	false	スライドがループする（最後のスライドが終わったら最初のスライドが現れる）
loopAdditionalSlides	0	ループ時に作成されるクローンの数を指定
loopedSlides		ループ時にslidesPerView： 'auto'の場合クローンの数を指定
loopFillGroupWithBlank	false	スライドをグループ化している際に、足りないスライドがある場合に空白のスライドを作成してくれる
breakpoints		レスポンシブ対応時のブレイクポイントを設定。ブレイクポイント毎に、オプションを設定する事で実現する。参考例はこちら
observer	false	Swiperのスタイルが変更時や子要素を変更時に再初期化される
observeParents	false	親要素もobserverの設定がされる
observeSlideChildren	false	子要素のobserverの設定がされる
containerModifierClass	'Swiper-container-'	全体を囲っているdivにつけるクラス名
slideClass	'Swiper-slide'	各スライドにつけるクラス名
slideActiveClass	'Swiper-slide-active'	アクティブになっているスライドにつくクラス名
slideDuplicateActiveClass	'Swiper-slide-duplicate-active'	アクティブになっている複数のスライドにつくクラス名
slideVisibleClass	'Swiper-slide-visible'	表示されているスライドのクラス名
slideDuplicateClass	'Swiper-slide-duplicate'	loop設定時につくスライドのクラス名
slideNextClass	'Swiper-slide-next'	次のスライドにつくクラス名
slideDuplicateNextClass	'Swiper-slide-duplicate-next'	次のスライドが複数ある場合につくクラス名
slidePrevClass	'Swiper-slide-prev'	前のスライドにつくクラス名
slideDuplicatePrevClass	'Swiper-slide-duplicate-prev'	前のスライドが複数ある場合につくクラス名
wrapperClass	'Swiper-wrapper'	ラッパーにつけるクラス名

詳細設定が必要なオプションパラメータ

左右のナビゲーションを設定する

パラメータ	詳細設定	初期値	説明、サンプルコード
navigation			`var mySwiper = new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, });`
	nextEl		「次へ」ボタンのクラス名を指定
	prevEl		「前へ」ボタンのクラス名を指定
	hideOnClick	false	スライダーのコンテナをクリック後、ナビゲーションのボタンの表示非表示を切り替える（執筆時点でクラスを付与されるが、CSSが設定されていないので、自分で非表示用CSSを設定する必要があるかもです）
	disabledClass	'swiper-button-disabled'	次や前のスライドが無い時に、指定のクラスが付与される
	hiddenClass	'swiper-button-hidden'	hideOnClickがtrueの際に、ナビゲーションに付与されるクラス名を指定

ページネーションを設定する

現在どのスライドを表示しているかを、丸などのシンプルなアイコンで表示する。

パラメータ	詳細設定	初期値	説明、サンプルコード
pagination			ページネーションを設定 `var mySwiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', type: 'bullets', }, });`
	el		ページネーションを表示させる空DIVなどのクラスを指定する。デフォルトのCSSには'.swiper-pagination'というクラスが設定されている
	type	'bullets'	ページネーションのタイプを指定できる。 "bullets", "fraction", "progressbar","custom"から選べる。
	bulletElement	'span'	ページネーションを構成するタグを変更する
	dynamicBullets	false	アクティブなページネーションに大きく表示させる
	dynamicMainBullets	1	dynamicBulletsを適用させる数を指定
	hideOnClick	true	スライドクリック時にページネーションの表示非表示を切り替える
	clickable	false	ページネーションをクリックすると、対応するスライドが表示される
	progressbarOpposite	false	プログレスバーの表示方向を横方向のスライドの場合は垂直方向に、縦方向のスライダーの場合は水平方向に、つまりスライドの方向とは逆にする。

自動再生を設定する

パラメータ	詳細設定	初期値	説明、サンプルコード
autoplay			自動でスライダーがを動かす設定 `var mySwiper = new Swiper('.swiper-container', { autoplay: { delay: 5000, }, });`
	delay	3000	スライダーが動く「時間の間隔」をミリ秒で指定
	stopOnLastSlide	false	最後のスライドに到達すると自動再生が停止（ループ時は無効）
	disableOnInteraction	true	ユーザーがスワイプなどの操作をしたら、自動再生が止まる
	reverseDirection	false	逆方向に自動再生
	waitForTransition	true	スライドの移動を待った後に自動再生する

Swiperが動かない時のチェック項目

Swiperが動かない時にチェックすべき点

対象外のブラウザではないか？
オプションの「値」の記述で、trueやfalseや数字以外は""か''で囲っているか？
swiper.jsの読み込み位置がbody閉じタグの直前になっているか？
swiper.jsの読み込み位置がオプション設定などの後になっていないか？
swiper.jsのバージョンと使えるオプションはあっているか？
パラメータの後の:は抜けていないか？
各オプションの記述の後の,は抜けていないか？

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント