【JavaScript】Vanilla JSで書かれたレスポンシブスライダー「swiper.js」

2020年06月01日
2023年1月14日
コーディング

swiper.jsは、スワイプにも対応したカスタマイズオプションが豊富なスライダープラグインです。数多くのサイトがswiper.jsを使っているかと思います。
ここではスライダープラグイン「swiper.js」の設置方法と基本のオプションをいくつかご紹介します。

Index

swiper.jsとは

レスポンシブ対応のスライダープラグインです。jQuery全盛期の時は「Nivo Slider」とか「Flex slider」や、今でも「bxSlider」、「slick」などがありますが、個人的にはswiperの一択というくらい便利で色々出来ます。現在のリリースされている最新バージョンは8.4.5。※2023年1月時点。

この記事を読んでる人におすすめの書籍

JavaScript逆引きレシピ第2版 [ 山田祥寛 ]

created by Rinker

¥3,080 (2024/11/21 15:11:36時点楽天市場調べ-詳細)

特徴

jQuery不要で美しいモバイルメニューが実装可能
Mutation observer
フレックスボックスのレイアウト
右から左に書く言語対応(RTLサポート)
複数の行のスライドのレイアウト
3Dエフェクト
swiper間でコントロール可能(双方向制御)
フルナビゲーションコントロール
リッチAPI
柔軟なスライドレイアウトグリッド
視差トランジション
画像の遅延読み込み
バーチャルスライド

ダウンロード

こちらからダウンロードしてサイトに下の2つのファイルを読み込ませるだけ。

swiper.js公式サイト demo

<script src="path/to/swiper.min.js"></script>

CSS

<link rel="stylesheet" href="path/to/swiper.min.css" />

使い方

1.ファイルを読み込む

まず、swiper.jsとswiper.cssファイルを読み込ませる。

<!DOCTYPE html>
<html>
  <head>
  ...
  <link href="path/to/swiper.min.css" rel="stylesheet" />
  </head>
  <body>
  ...
  <script src="path/to/swiper.min.js"></script>
  </body>
</html>

2.htmlの記述

次にhtmlファイルに基本的なマークアップを追加します。
後述しますがページネーションやボタン、スクロールバーなどは必要に応じで記述してください。

<!-- 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>

3.プラグインを実行させるための記述

swiper.jsを実行させる為の記述をします。

<body>
  ...
  <script>
    var mySwiper = 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',
      },
    })
  </script>
</body>

個人的にはどのページ(または場所)で使用しているかわかりやすくするために、「.swiper-container」の指定する名前を「js-swiper-○○○」などにしてます。

全部通すとこんな感じ。

<!DOCTYPE html>
<html>
  <head>
    <link href="path/to/swiper.min.css" rel="stylesheet" />
  </head>
  <body>
    <!-- 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>

    <script src="path/to/swiper.min.js"></script>
    <script>
      var mySwiper = 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',
        },
      })
    </script>
  </body>
</html>

オプション

オプションはたくさんありすぎるのでよく使うものをいくつかピックアップ。

デフォルト

デフォルトだと自動でスライドしません。

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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
</div>

<script>
  var swiper = new Swiper('.swiper-container');
</script>

demo

ナビゲーションを表示させる

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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
  <!-- ナビゲーション用のタグを追加 -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

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

demo

navigationパラメーター

nextEl	null　(文字列/html要素)	クリックすると「次へ」ボタンのように動作する要素のCSSセレクタまたはHTML要素を持つ文字列
prevEl	null　(文字列/html要素)	クリックした後に「前」ボタンのように動作する要素のCSSセレクタまたはHTML要素を持つ文字列
hideOnClick	false(真/偽)	スライダーのコンテナをクリックした後のナビゲーションボタンの表示を切り替える
disabledClass	‘swiper-button-disabled'(文字列)	ナビゲーションボタンが無効になったときに追加されるCSSクラス名。無効になる場合っていうのが最後のスライドに到達した場合、「次へ」ボタンが押せなくなる(無効になる)ということ。
hiddenClass	‘swiper-button-hidden'(文字列)	ナビゲーションボタンが非表示になった時に追加されるCSSクラス名

ページャーを表示させる

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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
  <!-- ページャー用のタグを追加 -->
  <div class="swiper-pagination"></div>
</div>

<script>
  var mySwiper = new Swiper('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },
  });
</script>

paginationのパラメーター

el	null(文字列)	CSS セレクタを持つ文字列、またはページネーションを持つコンテナの HTML 要素
type	‘bullets'(文字列)	ページ分割の種類を指定する文字列。bullets”、”fraction”、”progressbar”、”custom “のいずれかになります。
bulletElement	‘span'(文字列)	シングルページネーションの箇条書きを表現するためにどのHTMLタグを使用するかを定義します。箇条書きのページネーションタイプの場合のみ。
dynamicBullets	false(真/偽)	あなたがスライドの多くを使用して箇条書きのページネーションを使用している場合に有効にするには良いです。だから、それは同時に表示されているだけでいくつかの箇条書きを保持します。
dynamicMainBullets	1(数値)	dynamicBulletsを有効にしたときに表示されるメインの箇条書きの数。
hideOnClick	true(真/偽)	スライダーのコンテナをクリックした後のページネーションコンテナの表示（非表示/true）を切り替える
clickable	false(真/偽)	真の場合は、ページネーションボタンをクリックすると、適切なスライドへの遷移が発生します。箇条書きページネーションタイプの場合のみ
progressbarOpposite	false(真/偽)	Swiperの `direction` パラメータとは逆のページ分割プログレスバーを作成します。つまり、水平方向のスワイパーには垂直方向のプログレスバー、垂直方向のスワイパーには水平方向のプログレスバーを作成します。
formatFractionCurrent	number => number(function(number))	カスタムフォーマットの端数のページネーション現在の番号。関数は現在の数値を受け取り、フォーマットされた値を返す必要があります。
formatFractionTotal	number => numberfunction(number)	カスタムフォーマットの端数のページネーションの合計数。関数は合計数を受け取り、フォーマットされた値を返す必要があります。
renderBullet	null(function(index, className))	このパラメータは、ページ分割箇条書きを完全にカスタマイズすることを可能にします。ここに、ページ分割箇条書きのインデックス番号と必須要素のクラス名(className)を受け付ける関数を渡す必要があります。弾丸のページ分割タイプの場合のみたとえば、このコードを使用すると、我々はページ分割箇条書きにスライド番号を追加することができます。
renderFraction	null(function(currentClass, totalClass))	このパラメータでは、”fraction “ページネーションのhtmlをカスタマイズすることができます。端数のページ分割タイプの場合のみ。 For example:
renderProgressbar	null(function(progressbarFillClass) )	このパラメータでは、”progress “のページネーションをカスタマイズすることができます。プログレスページネーションタイプの場合のみ。 For example:
renderCustom	null(function(swiper, current, total))	このパラメータは、どのようにレンダリングするかを指定しなければならないカスタムページ分割タイプの場合に必要です。 For example:
bulletClass	‘swiper-pagination-bullet'(文字列)	シングルページネーション箇条書きのCSSクラス名
bulletActiveClass	‘swiper-pagination-bullet-active'(文字列)	現在アクティブなページネーション箇条書きのCSSクラス名
modifierClass	‘swiper-pagination-‘(文字列)	パラメータに応じてページネーションに追加されるモディファイアCSSクラス名の先頭
currentClass	‘swiper-pagination-current'(文字列)	fraction “ページネーションで現在アクティブなインデックスを持つ要素のCSSクラス名
totalClass	‘swiper-pagination-total'(文字列)	フラクション “pagination “で “snaps “の合計数を持つ要素のCSSクラス名
hiddenClass	‘swiper-pagination-hidden'(文字列)	非アクティブになったときのページネーションのCSSクラス名
progressbarFillClass	‘swiper-pagination-progressbar-fill'(文字列)	pagination progressbar fill要素のCSSクラス名
clickableClass	‘swiper-pagination-clickable'(文字列)	クリック可能なときにページネーションに設定されるCSSクラス名
lockClass	‘swiper-pagination-lock'(文字列)	無効時にページネーションに設定されるCSSクラス名

demo

オート(自動)スライド

自動でスライドする設定。下の設定だと3秒ごとに自動で次のスライドに移ります。

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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
  <!-- ページャー -->
  <div class="swiper-pagination"></div>
  <!-- ナビゲーション -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

<script>
  var swiper = new Swiper('.swiper-container', {
    autoplay: {
      delay: 3000,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>

demo

autoplayパラメーター

delay	3000	トランジション間の遅延時間（ミリ秒）。このパラメータが指定されていない場合、自動再生は無効になります。特定のスライドに異なる遅延を指定する必要がある場合は、スライド上のdata-swiper-autoplay（ミリ秒単位）属性を使用してそれを行うことができます。
stopOnLastSlide	false	このパラメータを有効にすると、最後のスライドに到達すると自動再生が停止します（ループモードでは効果はありません）。
disableOnInteraction	true	falseに設定すると、ユーザーとのインタラクション（スワイプ）の後に自動再生が無効にならず、インタラクションの後は毎回再起動されます。
reverseDirection	false	逆方向の自動再生を有効にする
waitForTransition	true	この機能を有効にすると、自動再生はラッパーの遷移が続くのを待ちます。スライダーにトランジションがない場合、仮想翻訳を使用している場合に無効にすることができます。

サムネイルを表示させる

HTML

<div class="swiper-container gallery-top">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image:url(./images/nature-1.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-2.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-3.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-4.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-5.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-6.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-7.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-8.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-9.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-10.jpg)"></div>
  </div>
  <div class="swiper-button-next swiper-button-white"></div>
  <div class="swiper-button-prev swiper-button-white"></div>
</div>
<!-- サムネイル用のスライド -->
<div class="swiper-container gallery-thumbs">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image:url(./images/nature-1.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-2.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-3.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-4.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-5.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-6.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-7.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-8.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-9.jpg)"></div>
    <div class="swiper-slide" style="background-image:url(./images/nature-10.jpg)"></div>
  </div>
</div>

<script>
  var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
  });
  var mySwiper = new Swiper('.swiper-container', {
    ...
    thumbs: {
      swiper: galleryThumbs
    }
  });
</script>

①サムネイル部分の設定

var galleryThumbs = new Swiper('.gallery-thumbs', { 
  spaceBetween: 10,
  slidesPerView: 4,
  freeMode: true,
  watchSlidesVisibility: true,
  watchSlidesProgress: true, 
});

②スライドの設定

var galleryTop = new Swiper('.gallery-top', { 
  spaceBetween: 10, 
  navigation: { 
    nextEl: '.swiper-button-next', 
    prevEl: '.swiper-button-prev', 
  }, 
  thumbs: { 
    swiper: galleryThumbs//ここで①のサムネイルの設定を指定する 
  } 
});

thumbsパラメーター

swiper	(object Swiper)	サムズとして使用されるswiperのインスタンス、またはサムズのswiperを初期化するためのSwiperパラメータを持つオブジェクト。 For example:
slideThumbActiveClass	‘swiper-slide-thumb-active'(文字列)	活性化された親指スイパースライドに追加されるクラス
thumbsContainerClass	‘swiper-container-thumbs'(文字列)	thumbs swiper-containerに追加される追加クラス
multipleActiveThumbs	true(真/偽)	有効にすると、複数のサムネイルスライドがアクティブになることがあります。
autoScrollOffset	0(数値)	それはautomaticall移動する必要がありますエッジからアクティブなスライド親指に設定することができます親指をスクロールします。例えば、1と最後に表示される親指に設定されている場合、それは自動で親指をスクロールしますアクティブになります（エッジから1）。

demo

レスポンシブ対応

ブレイクポイントごとにスライドの枚数やその他オプションが設定出来ます。

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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

<script>
  var swiper = new Swiper('.swiper-container', {
    slidesPerView: 1,
    spaceBetween: 10,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    breakpoints: {
      //windowサイズが640px以上の設定
      640: {
        slidesPerView: 2,
        spaceBetween: 20,
      },
      //windowサイズが768px以上の設定
      768: {
        slidesPerView: 4,
        spaceBetween: 40,
      },
      //windowサイズが1024px以上の設定
      1024: {
        slidesPerView: 5,
        spaceBetween: 50,
      },
    }
  });
</script>

demo

デザイン編集

デザインの調整はカスタマイズ用のcssなどを用意して上書きするような形にするのがおすすめです。直接swiper.cssを編集するのは良くないです。

<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="swiper.css" rel="stylesheet" />
    <link href="swiper-custom.css" rel="stylesheet" />//カスタム用のcssを読み込んで記述する
  </head>
  <body>
    ...
  </body>
</html>

さいごに

基本しか説明してないですが高機能なオプションが沢山あるので活用のアイデアが膨らみますね。

この記事を読んだ人におすすめの書籍

JavaScript逆引きレシピ第2版 [ 山田祥寛 ]

created by Rinker

¥3,080 (2024/11/21 15:11:36時点楽天市場調べ-詳細)

あわせて読みたい記事

【JavaScript】「swiper.js」でスライダーを1ページ内に複数設置する方法

swiper.jsは、スワイプジェスチャーにも対応しカスタマイズオプションも豊富なスライダーを実装するためのJavaScriptライブラリです。ここではswiper.jsを使ったスライダーを同一ページに複数設置する方法を説明します。

何もないけどヨロシク。

2020年06月01日
2023年1月14日
コーディング

nanimonai

プログラム書く方が楽しいデザイナーです。デザイン事務所→フリーランス→スタートアップ入社→フリーランス(現在)。全然更新しないのでブログは向いてないと思いつつなんとかやってます。よければTwitterのフォローもお願いします。

【JavaScript】Vanilla JSで書かれたレスポンシブスライダー「swiper.js」

swiper.jsとは

特徴

ダウンロード

使い方

1.ファイルを読み込む

2.htmlの記述

3.プラグインを実行させるための記述

オプション

デフォルト

ナビゲーションを表示させる

ページャーを表示させる

オート(自動)スライド

サムネイルを表示させる

レスポンシブ対応

デザイン編集

さいごに

カテゴリー

キーワード

デザインに必須のフリー素材サイト

関連記事

【JavaScript】スマホにだけ「mmenu.js」を適用させる方法

【JavaScript】「swiper.js」でスライダーを1ページ内に複数設置する方法

【Javascript】Vue3のディレクティブまとめ

【JavaScript】js-cookie.jsを使ってダークモード切り替ボタンを作る。

WEBサイトのテキスト・画像のコピー・キャプチャ防止策まとめ

【javascript】集合演算(和集合、積集合、差集合、排他的論理和)まとめ