jQueryを使わないSwiperの使い方【高機能スライダーを簡単に実装する方法】

Writer:Asai (20.09.18)

SwiperはjQueryに依存しない高機能スライダーを実装することができるプラグインです。jQueryに依存しないメリットは処理が遅くなる、ライブラリとの共存が難しいところがある、メンテナンスが必要など多々あります。

Swiper公式サイト

目次【非表示】

実装例
必要なファイルを準備する
Swiperの設定
Swiperのオプション

実装例

上記のように、jQueryを利用せずに、シンプルなHTMLとJSでスクロールの実装が可能です。Swiperはオプションも多数含まれており、CSSやJavascriptを書き換えることで、色々なシーンで利用できます。

必要なファイルを準備する

Swiperをダウンロード

Swiperを利用する方法として、CDNとファイルダウンロードがあります。

CDN

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

ダウンロード

ダウンロードは下記のサイトより行って下さい。

https://unpkg.com/swiper/

ダウンロードしたファイルのうち、利用するファイルは「swiper-bundle.min.cssとswiper-bundle.min.js」です。

Swiperの設定

Swiperの基本設定は下記のとおりです。

HTML

<!--Swiper -->
<div class="swiper-container">
  <!-- スライド要素を囲むラッパー -->
  <div class="swiper-wrapper"> 
    <!-- スライド -->
    <div class="swiper-slide"><img src="画像パス"></div>
    <div class="swiper-slide"><img src="画像パス"></div>
    <div class="swiper-slide"><img src="画像パス"></div>
    <div class="swiper-slide"><img src="画像パス"></div>
  </div>
  <!-- オプション：ページネーション -->
  <div class="swiper-pagination"></div>
  <!-- オプション：ナビゲーションボタン -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- オプションスクロールバー -->
  <div class="swiper-scrollbar"></div>
</div>

Javascript

var mySwiper = new Swiper ('.swiper-container', {
});

上記の設定を行ったあとのスライドショーが下記のとおりです。

上記のサンプルを見てもらってわかるように、見た目は出来上がっていますが、ページネーションや矢印のリンクが効いていません。この部分を動かすためには、ページネーション、ナビゲーションボタン、スクロールバーの設定を行う必要があります。

Swiperのオプション

ページネーション

ページネーションの設定は下記のとおりです。こちらの設定を行わないとページネーションが動作しないため、注意してください。

var mySwiper = new Swiper ('.swiper-container', {
  pagination: {
    el: '.swiper-pagination', 
    type: 'bullets',
    clickable: true,
  },
});

パラメータ	説明
el	ページネーションの要素セレクタ
type	ページネーションの表示パターン。 bullets、fraction、progressbar、customの中から選択
clickable	true指定で、ページネーションのアイコンをクリックすると対応するスライドに移動

実装例

上記の設定を行うと、下部にページネーションが表示されます。その他にもページネーションのオプションは多数用意されています。

ナビゲーションボタン

ナビゲーションボタンの設定は下記のとおりです。こちらの設定を行わないとナビゲーションボタンが動作しないため、注意してください。

var mySwiper = new Swiper ('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

パラメータ	説明
nextEl	次ボタンの要素セレクタ
prevEl	前ボタンの要素セレクタ

実装例

上記の設定を行うと、両端にナビゲーションボタンが表示されます。その他にもナビゲーションボタンのオプションは多数用意されています。

スクロールバー

スクロールバーの設定は下記のとおりです。こちらの設定を行わないとスクロールバーが動作しないため、注意してください。

var mySwiper = new Swiper ('.swiper-container', {
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  }
});

パラメータ	説明
el	スクロールバーの要素セレクタ
draggable	true 指定で、スクロールバーをドラッグしてスライドを操作できる