ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

スライダーを簡単に設置したい! jQuery不要 Swiperの使い方【JavaScript】

スライダーを簡単に設置したい! jQuery不要 Swiperの使い方【JavaScript】

「Swiperの使い方がわからない」
「Swiperが動かないけどどうすればいいの?」

悩み

こんな悩みにお答えします。

  • Swiperの使い方
  • Swiperが動かないときの対処法

この記事ではこんなことがわかります。

目次
  1. Swiper とは
  2. Swiperの使い方
    1. プラグインの読み込み
    2. HTMLを記述する
    3. JavaScriptを記述する
  3. Swiperが動かないときの対処法
    1. バージョンを確認する
  4. まとめ

Swiper とは

Swiperは、Webサイトにスライダー、カルーセルなどを設置できるJavaScriptプラグインです。
スライダープラグインは、Swiperの他にSlick、bx-sliderなどが有名です。
他のプラグインとは違うSwiperの特徴として、jQuery不要で使えるということがあります。
jQueryが不要なので、jQueryのバージョンに左右されることなく、動きも滑らかに感じられます。

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

POINT
SwiperはjQuery不要でスライダーを設置することができる!

Swiperの使い方

プラグインの読み込み

まず、ファイルをダウンロードするか、CDNから読み込みます。

バージョン6がリリースされたばかりです。
ちょっと使ってみた感じでは、基本的な使い方はバージョン5と違いは無さそうです。
できればバージョン6、最新バージョンを使うことに不安があればバージョン5を使ってください。

バージョン6
// CSS
<link rel="stylesheet" href="//unpkg.com/swiper/swiper-bundle.min.css">

// JavaScript
<script src="//unpkg.com/swiper/swiper-bundle.min.js"></script>
バージョン5
// CSS
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">

// JavaScript
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>

HTMLを記述する

Swiperを使用するとき、HTMLの基本パターンは以下のようになります。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</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>

以下、4つの要素は不要であれば書かなくても大丈夫です。

  1. swiper-pagination
  2. swiper-button-prev
  3. swiper-button-next
  4. swiper-scrollbar

JavaScriptを記述する

Swiperを使用するとき、HTMLの基本パターンは以下のようになります。

var Swiper = new Swiper('.swiper-container', {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },
})
よく使うオプション
パラメータ 初期値 説明
speed number 300 スライド間の遷移時間(ミリ秒)
effect string 'slide' 遷移効果。
"slide", "fade", "cube", "coverflow", "flip"のいずれか
spaceBetween number 0 スライド間の距離(ピクセル単位)。
slidesPerView number or 'auto' 1 ビューあたりのスライドの数(スライドは、スライダーのコンテナーで同時に表示されます)。
centeredSlides boolean false trueの場合、アクティブなスライドは中央に配置され、常に左側に配置されるわけではありません。
autoplay object/boolean trueでデフォルト設定。オブジェクトで詳細設定ができます。
breakpoints object さまざまなレスポンシブブレークポイント(画面サイズ)にさまざまなパラメーターを設定できます。
loop boolean false 連続ループモードを有効にするには、trueに設定します

オプションはもっとたくさんあるので、公式を参照してください。

Swiperデモ

Swiperが動かないときの対処法

バージョンを確認する

Swiperが動かないとき、使用するSwiperのバージョンと、参考にした解説ブログのバージョンが違っていることが多いです。

SwiperはバージョンによってJavaScriptのオプション設定の書き方が変わっています。
「Swiper」で検索したとき上位に表示されるブログの解説を見てもバージョン5、バージョン4が混在している状況なので注意が必要です。
さらに、バージョンをはっきり書いていないブログが上位表示されていることもあります。
これで解決できる可能性は高いです。

バージョン3以前は、これから新たに使うことや、検索上位に表示されていることはないと思いますが、バージョン4以降については注意してください。

  1. バージョン6 … 2020年7月3日~
  2. バージョン5 … 2019年9月17日~
  3. バージョン4 … 2017年8月30日~
  4. バージョン3 … 2015年2月11日~
POINT
Swiperが動かないときはバージョンを確認する!

まとめ

Swiperの使い方を紹介しました。

SwiperはjQuery不要でオプションもたくさん使える高機能なスライダープラグインです。
Web制作では今後も使う機会の多いプラグインになると思います。

Web制作を効率化したい!よく使うおすすめJavaScript、jQueryプラグイン、ライブラリ 9選

Web制作を効率化したいですか?この記事では、Web制作でよく使うスライダー、スクロールエフェクト、モーダルウィンドウ、郵便番号から住所を自動入力などに便利なJavaScript、jQueryのプラグイン、ライブラリを紹介しています。ぜひご覧ください。