MENU

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

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

swiper.jsとは

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

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

JavaScript逆引きレシピ 第2版 [ 山田 祥寛 ]
created by Rinker
¥3,080 (2024/04/23 15:41:55時点 楽天市場調べ-詳細)

特徴

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

ダウンロード

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

swiper.js公式サイト demo

JS

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

JS

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

JS

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

JS

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

JS

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

JS

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

JS

<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/04/23 15:41:55時点 楽天市場調べ-詳細)

あわせて読みたい記事

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

nanimonai

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

カテゴリー

キーワード

css Excel Figma Figma Basic Github Google Apps Script html javascript Mac Photoshop php RICOH THETA Sass STUDIO STUDIO Tips UI・UX Vue WordPress スプレッドシート 正規表現

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

関連記事