# スライドを簡単に実装できるJavaScriptライブラリ「Swiper」

URL: https://webrandum.net/js-library-swiper/
公開日: 2020-02-11
更新日: 2020-02-11
カテゴリー: コーディング
タグ: JavaScript, JavaScriptライブラリ
出典: Webrandum（著者: サイトウ マサカズ）

Swiperというライブラリを使うと、スライドが簡単に実装できます。

jQueryにも依存していないピュアなJavaScriptのライブラリなので、かなり重宝しています。

- オプションが豊富でカスタマイズしやすい

- jQueryに依存しない

- スマホにも対応している

## Swiperのインストール

![Swiperの公式サイト](https://webrandum.net/mskz/wp-content/uploads/2020/02/image_1-8-1024x475.png)

[![](https://www.google.com/s2/favicons?domain=swiperjs.com)Swiper![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/ecc771aaba4e1140f07016e6904b472b18a8ab9ba2f93096d7f1b619f7127d2c.webp)Swiper - The Most Modern Mobile Touch Sliderhttps://swiperjs.comSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.](https://swiperjs.com)

ローカルにファイルを設置したい場合は公式サイトからswiper.min.cssとswiper.min.jsをダウンロードして読み込みます。

CDNでの使用もできて、その場合は下記のコードを読み込みます。

```
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
```

## Swiperの使い方

スライドを使いたい場所に下記のHTMLを記述します。

```
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">スライドの内容1</div>
    <div class="swiper-slide">スライドの内容2</div>
    <div class="swiper-slide">スライドの内容3</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
```

あとは下記のJavaScriptでスライドが作成できます。

```
var mySwiper = new Swiper ('.swiper-container', {
  effect: "slide",
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination'
  }
});
```

See the Pen [Swiper_basic](https://codepen.io/31mskz10/pen/povKyVQ) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

### 左右のナビゲーション設定

左右のナビゲーションを設定したいときは下記のコードをJavaScriptに追加しつつ、`.swiper-container`内にHTMLを追加します。

```
navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
}
```

.swiper-button-nextと.swiper-button-prevであればSwiperのデフォルトCSSが反映されます。

基本的にはそこからCSSを上書きして使う方がラクそうです。

### ページネーション設定

ページネーションを設定したいときは下記のコードをJavaScriptに追加しつつ、`.swiper-container`内にHTMLを追加します。

```
pagination: {
  el: '.swiper-pagination'
}
```

こちらも.swiper-paginationだとSwiperのデフォルトCSSが反映されます。

## Swiperのオプション

Swiperのオプションはかなり多く、バージョンアップによって新しく追加されたり、変更も結構されます。

基本は公式のドキュメントを見てください（下記の表は公式のドキュメントを簡単に訳したものです）。

[![](https://www.google.com/s2/favicons?domain=swiperjs.com)Swiper![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/ecc771aaba4e1140f07016e6904b472b18a8ab9ba2f93096d7f1b619f7127d2c.webp)Swiper APIhttps://swiperjs.com/api/#parametersMost Modern Mobile Touch Slider](https://swiperjs.com/api/#parameters)

| オプション名 | 初期値 | 内容 |
| --- | --- | --- |

| init | true | スライド生成時にスライドを初期化するかどうか |
| --- | --- | --- |

| updateOnWindowResize | true | ウインドウのサイズ変更時にスライドの位置を再計算する |
| --- | --- | --- |

| initialSlide | 0 | 最初に表示させるスライド番号（1番目が0） |
| --- | --- | --- |

| direction | ‘horizontal’ | スライドの方向を横（’horizontal’）か縦（’vertical’）を選択する |
| --- | --- | --- |

| speed | 300 | スライドの速度をミリ秒で指定 |
| --- | --- | --- |

| setWrapperSize | false | .swiper-wrapperに全てのスライドの合計の幅が自動で設定される |
| --- | --- | --- |

| virtualTranslate | false | アニメーションのtransformが削除される （自分でアニメーションを作成したい場合に使用） |
| --- | --- | --- |

| width | false | スライドの幅を指定します |
| --- | --- | --- |

| height | false | スライドの高さを指定します |
| --- | --- | --- |

| autoHeight | false | trueにすると、スライドの高さが内容に応じて変わるようになる |
| --- | --- | --- |

| roundLengths | false | スライドの中身のwidthやheightの小数点以下が四捨五入される 中の画像がぼけるときにtrueにするとキレイになる場合がある |
| --- | --- | --- |

| nested | false | trueにすると入れ子になったスライドのタッチイベントが正常に取得できる |
| --- | --- | --- |

| uniqueNavElements | true | ページネーションの1つ目をクリックすると1つ目のスライドに移動するようになる |
| --- | --- | --- |

| effect | ‘slide’ | スライダーのアニメーションを’slide’、’fade’、’cube’、’coverflow’、’flip’から選択する |
| --- | --- | --- |

| runCallbacksOnInit | true | スライダーの初期化時にTransition / SlideChange・Start / Endイベントを発火させる |
| --- | --- | --- |

| watchOverflow | false | trueにすると、スライドの枚数が1枚しかないときにボタンやページネーションを削除する |
| --- | --- | --- |

| on |   | イベントハンドラを登録できる |
| --- | --- | --- |

| cssMode | false | trueにするとCSS Scroll Snap APIが使用される |
| --- | --- | --- |

| spaceBetween | 0 | スライド間の距離をpx単位で設定する |
| --- | --- | --- |

| slidesPerView | 1 | 1画面で見えるスライド枚数を指定する |
| --- | --- | --- |

| slidesPerColumn | 1 | 列ごとのスライド枚数を指定する |
| --- | --- | --- |

| slidesPerColumnFill | ‘column’ | slidesPerColumnを指定したときに、列（’column’）をベースするか、 行（’row’）をベースにするか指定する |
| --- | --- | --- |

| slidesPerGroup | 1 | スライドグループ化して1つにまとめる |
| --- | --- | --- |

| slidesPerGroupSkip | 0 | グループ化した複数スライドをスキップする設定 （グループ化する数はslidesPerGroupの値になる） |
| --- | --- | --- |

| centeredSlides | false | trueにするとスライドのスタートが真ん中になる falseだと左端がスタートになる |
| --- | --- | --- |

| centeredSlidesBounds | false | trueにすると、アクティブなスライドはスライダーの最初と最後にギャップを追加せず真ん中に配置される |
| --- | --- | --- |

| slidesOffsetBefore | 0 | スライドの前に追加の余白を設定する |
| --- | --- | --- |

| slidesOffsetAfter | 0 | スライドの後に追加の余白を設定する |
| --- | --- | --- |

| normalizeSlideIndex | true | trueだとslidesPerGroupとcenteredSlidesを使っているときに、 1枚目の認識がズレてしまっているのを修正してくれる |
| --- | --- | --- |

| centerInsufficientSlides | false | trueだとスライド枚数がslidePerView未満の場合にスライドを中央に配置する |
| --- | --- | --- |

| grabCursor | false | trueだとカーソルがgrabになる |
| --- | --- | --- |

| touchEventsTarget | ‘container’ | タッチイベントの対象をcontainerにするかwrapperにするか設定する |
| --- | --- | --- |

| touchRatio | 1 | 次のスライドにいくまでのスワイプ感度を設定する 数字が大きければ大きいほど、少しスワイプしただけで次のスライドに切り替わる |
| --- | --- | --- |

| touchAngle | 45 | スワイプを認識する角度を設定する |
| --- | --- | --- |

| simulateTouch | true | trueだとタッチイベントをマウスイベントのように認識する |
| --- | --- | --- |

| shortSwipes | true | trueだとタッチ時間の短いスワイプも有効にする |
| --- | --- | --- |

| longSwipes | true | trueだとタッチ時間が長いスワイプも有効にする |
| --- | --- | --- |

| longSwipesRatio | 0.5 | タッチ時間の長いスワイプ時に、どのくらいの比率次のスライドが見えていたら 次のスライドに移動するか設定する |
| --- | --- | --- |

| longSwipesMs | 300 | タッチ時間の長いスワイプで、どのくらい経過したら次のスライドへ移動するのを キャンセルするかミリ秒で設定する |
| --- | --- | --- |

| followFinger | true | trueだとスワイプ時に前後のスライドの内容が見れる |
| --- | --- | --- |

| allowTouchMove | true | trueだとスワイプできるようになる。 falseだとナビゲーションでしかスワイプができなくなる |
| --- | --- | --- |

| threshold | 0 | 設定した数値分スワイプしないとスライダーが動かなくなる |
| --- | --- | --- |

| touchStartPreventDefault | false | trueだとtouchstartイベントが動かなくなる |
| --- | --- | --- |

| touchStartForcePreventDefault | false | trueだとイベントのデフォルトを常に禁止する |
| --- | --- | --- |

| touchMoveStopPropagation | true | trueだとイベントのバブリングを防ぐ |
| --- | --- | --- |

| iOSEdgeSwipeDetection | false | iOSのUIWebViewでのスワイプイベントを有効にする |
| --- | --- | --- |

| iOSEdgeSwipeThreshold | 20 | iOSのUIWebViewで画面左端から設定した数より小さい範囲では スワイプイベントが有効にならない |
| --- | --- | --- |

| touchReleaseOnEdges | false | trueだとスワイプ時も画面がスクロールできるようになる |
| --- | --- | --- |

| passiveListeners | true | trueだとスマホでのパフォーマンスを高める |
| --- | --- | --- |

| resistance | true | 最初のスライドから最初のスライドへ移動するときのバウンスアニメーションに 抵抗するようなアニメーションがつく |
| --- | --- | --- |

| resistanceRatio | 0.85 | resistanceの抵抗力を設定する |
| --- | --- | --- |

| preventIntercationOnTransition | false | スワイプの最中に別スライドに移動できなくなる |
| --- | --- | --- |

| allowSlidePrev | true | trueだと前のスライドへ移動できるようになる |
| --- | --- | --- |

| allowSlideNext | true | trueだと次のスライドへ移動できるようになる |
| --- | --- | --- |

| noSwiping | true | noSwipingClassで設定したClassが付いたスライドはスワイプできなくなる |
| --- | --- | --- |

| noSwipingClass | ‘swiper-no-swiping’ | noSwiping用のClassを指定する（noSwipingがtrue前提） |
| --- | --- | --- |

| noSwipingSelector |   | セレクタを指定すると、そのセレクタ上ではスワイプできなくなる |
| --- | --- | --- |

| swipeHandler | null | スワイプに使用するセレクタを指定する |
| --- | --- | --- |

| preventClicks | true | trueだとスワイプ中にリンクがクリックできないようになる |
| --- | --- | --- |

| preventClicksPropagation | true | trueだとスワイプ中にリンク上のクリックイベントの停止させる |
| --- | --- | --- |

| slideToClickedSlide | false | trueだと任意のスライドへの遷移が生成される |
| --- | --- | --- |

| freeMode | false | trueだとスライド位置が固定されない |
| --- | --- | --- |

| freeModeMomentum | true | trueだとスワイプしてカーソルを離したあとに、スライドがしばらく動くようになる |
| --- | --- | --- |

| freeModeMomentumRatio | 1 | 値が大きいほどスライダーを離したあとの距離が大きくなる |
| --- | --- | --- |

| freeModeMomentumVelocityRatio | 1 | 値が大きいほどスライダーを離したあとの速度が速くなる |
| --- | --- | --- |

| freeModeMomentumBounce | true | trueだとバウンスアニメーションが付く |
| --- | --- | --- |

| freeModeMomentumBounceRatio | 1 | 値が大きいほどバウンス効果が大きくなる |
| --- | --- | --- |

| freeModeMinimumVelocity | 0.02 | フリーモードの勢いが発生するために必要な、最小タッチ移動速度を設定する |
| --- | --- | --- |

| freeModeSticky | false | trueだとフリーモードでスライド位置へのスナップが有効になる |
| --- | --- | --- |

| watchSlidesProgress | false | trueだとプログレスバー（進行状況の表示）を計算するようになる |
| --- | --- | --- |

| watchSlidesVisibility | false | スライドに追加の表示クラスが追加される （watchSlidesProgressが有効である必要がある） |
| --- | --- | --- |

| preloadImages | true | trueにするとすべての画像を強制的にロードする |
| --- | --- | --- |

| updateOnImagesReady | true | trueにするとすべての画像がロードされたあとにSwiperが再初期化される |
| --- | --- | --- |

| loop | false | 最後のスライドの次に、最初のスライドに戻るようになる |
| --- | --- | --- |

| loopAdditionalSlides | 0 | ループの実行時に複製されるスライドの追加番号の設定 |
| --- | --- | --- |

| loopedSlides | null | ループ時に複製するスライドの数を設定 |
| --- | --- | --- |

| loopFillGroupWithBlank | false | trueにするとスライドグループに空のスライドが作成される |
| --- | --- | --- |

| observer | false | trueにするとSwiperのスタイルが変更されたり子要素を変更されるたびに再初期化される |
| --- | --- | --- |

| observeParents | true | Swiperの親要素もobserverの設定がされる |
| --- | --- | --- |

| observeSlideChildren | false | Swiperの子要素のobserverの設定がされる |
| --- | --- | --- |

### class名の管理

下記のオプションを使うと、class名の変更ができます。

しかし、実際に運用するときはclass名を変えてしまうとあとで訳が分からなくなってしまうのでオススメしません（特に複数人が関わる実装の場合）。

| オプション名 | 初期値 | 内容 |
| --- | --- | --- |

| containerModifierClass | ‘swiper-container’ | Swiperを包括しているClass名の設定 |
| --- | --- | --- |

| wrapperClass | ‘swiper-wrapper’ | スライドのラッパーのClass名 |
| --- | --- | --- |

| slideClass | ‘swiper-slide’ | スライドのClass名 |
| --- | --- | --- |

| slideActiveClass | ‘swiper-slide-active’ | 現在アクティブなスライドのClass名 |
| --- | --- | --- |

| slideDuplicatedActiveClass | ‘swiper-slide-duplicate-active’ | アクティブなスライドの複製されたスライドのClass名 |
| --- | --- | --- |

| slideVisibleClass | ‘swiper-slide-visible’ | 現在表示されているスライドのClass名 |
| --- | --- | --- |

| slideDuplicateClass | ‘swiper-slide-duplicate’ | loopで複製されたスライドのClass名 |
| --- | --- | --- |

| slideNextClass | ‘swiper-slide-next’ | アクティブなスライドの次のClass名 |
| --- | --- | --- |

| slideDuplicatedNextClass | ‘swiper-slide-duplicate-next’ | アクティブなスライドの次の複製されたスライドのClass名 |
| --- | --- | --- |

| slidePrevClass | ‘swiper-slide-prev’ | アクティブなスライドの前のClass名 |
| --- | --- | --- |

| slideDuplicatedPrevClass | ‘swiper-slide-duplicate-prev’ | アクティブなスライドの前の複製されたスライドのClass名 |
| --- | --- | --- |

class名を変える代わりにオススメしたいのが、class名の追加です。

### レスポンシブの設定

JavaScriptに`breakpoints`を追加するとレスポンシブの設定ができます。

```
breakpoints: {
  // 320px以下の場合
  320: {
    slidesPerView: 1,
    spaceBetween: 10
  },
  // 480px以下の場合
  480: {
    slidesPerView: 2,
    spaceBetween: 20
  },
  // 640px以下の場合
  640: {
    slidesPerView: 3,
    spaceBetween: 30
  }
}
```

ブレークポイントは自分で指定して、その中にオプションを追加して指定します。