スライダーの超定番ライブラリSwiper.jsの基本と使い方

13分

Swiperのイラスト

SHARE

スライダー・カルーセルは、複数の選択肢やコンテンツを列で表示させるUIで、限られたスペースにたくさん表示させたい時によく使われます。

かかかず
かかかず

スライダー・カルーセルって何だっけ？と「？」の方は、以下の記事もご覧ください。

カルーセルのイラスト カルーセルの基本的な使い方とデザイン

この記事は、スライダー・カルーセルUIの超定番とも言えるSwiper.jsについて解説していきます。

脱jQueryの方や、スライダーをサクッと実装したい方は最後までご覧いただけると嬉しいです。

Swiperとは？

Swiperは、JavaScriptを使ってスライダー・カルーセルのUIを使うことができるライブラリです。

Swiper公式 より
かかかず
かかかず

スライダーの超定番ライブラリと言っても過言じゃないです。

定番のスライダーにはslickがありますが、最近はSwiperを使ったスライダーの方が多くなってきた印象です。

そんなSwiperですが、早速サンプルをご覧ください。以下は、CSSやパラメータをそこまで多く書かずに設置したスライダーです。

その1
その2
その3
その4
その5
その6

こんな感じのスライダー・カルーセルが簡単な記述で実装できてしまいます。

Swiperの特徴

綱渡り

Swiperの特徴についてですが、以下の通りです。

Swiperの特徴
  • jQueryのライブラリなしでスライダーを実装可能
  • クリック・タッチ・スワイプに対応
  • 豊富なオプションでいろんな装飾・エフェクトが可能
  • モダンJavaScriptとの相性もGOOD

中でも、jQuery不要で実装できるのが大きいメリットです。

また最近は、ReactやVueなどのJSライブラリやフレームワークの台頭に比例して、この辺のReactやVueなどのモダン JavaScriptとの連携も可能なのも人気の一つです。

Swiperの実装方法と手順

手順と方法

次に、Swiperの実装方法について解説していきます。手順は、以下3つのSTEPを辿れば完了します。

Swiper本体の読み込み

まずは、Swiperの読み込みの設定を行いましょう。

Swiperは、CDNで配信されているので以下のコードを<head>〜</head> に記述します。

HTML 

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

HTMLを記述

Swiper本体の読み込みが完了したら、次に設置したい箇所にHTMLを記述します。

以下は、Swiper公式サイト にあるソースコードです。このコードをそのままコピペして中身をいじっていくのもOKです。

HTML 

<!-- Slider main container -->
<div class="swiper">
  <!-- 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>

かかかず
かかかず

このHTMLをベースに、スライダーの中身は swiper-slide のclassのついたdivタグの中をいじればOKです。

Swiper JSの記述

最後に、SwiperのJSを<body>〜</body> のクロージングタグ前に記述すれば完了です。以下は一例ですが、このようにしてパラメータやモジュールを好みに応じて記述して動かします。

Swiper JS 

const swiper = new Swiper(".swiper-container", {
  pagination: {
    el: ".swiper-pagination",
  },
  // 前後スライドボタンを表示
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  loop: true, // ループの有効化
});

かかかず
かかかず

これで完了です！

Swiperを使ったスライダーのサンプルとコピペ用コード

Swiperでスライダーを色々作ってみました。実装の例とコピペ用コードも設置しましたので、改造用のベースとして利用ください。

標準的なスライダー

左右の矢印と、下部のインジゲーター(現在位置)付きの標準的なスライダーです。3つのコンポーネントをスライダーで表示させます。

その1
その2
その3

コードを表示する

HTML 

  <div class="wrapper">
    <div class="sample-swiper carousel">
      <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide">
            <div class="item itemBlue">その1</div>
          </div>
          <div class="swiper-slide">
            <div class="item itemRed">その2</div>
          </div>
          <div class="swiper-slide">
            <div class="item itemBlack">その3</div>
          </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>
      </div>
      <!-- Slider main container -->
    </div>
  </div>

Swiper JS 

const swiper = new Swiper(".swiper-container", {
  pagination: {
    el: ".swiper-pagination",
  },
  // 前後スライドボタンを表示
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  loop: true, // ループの有効化
});

よく使うパラメータ

Swiperを使う時、セットでよく使うパラメータです。pagination: navigation: loop: の3つはスライダーを動かす時に最低限的に使うものなので、

困った人
困った人

Swiperを入れたけど、動かない・・・。

こんな時に、このプロパティを記述すると動いたりする場合があるので、覚えておくといいと思います。

Swiper
  pagination: {
      el: ".swiper-pagination",
    },
    // 前後スライドボタンを表示
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    loop: true, // ループの有効化

奥行きのあるスライダー

スライダーで真ん中に表示されているコンポーネントを拡大させて、奥行きのあるスライダーです。

その1
その2
その3

コードを表示する

HTML 

<div class="wrapper">
    <div class="sample-swiper carousel no-shadow">
      <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide">
            <div class="item itemBlue">その1</div>
          </div>
          <div class="swiper-slide">
            <div class="item itemRed">その2</div>
          </div>
          <div class="swiper-slide">
            <div class="item itemBlack">その3</div>
          </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>
      </div>
      <!-- Slider main container -->
    </div>
  </div>

Swiper JS 

const swiper = new Swiper(".swiper-container", {
  // ドットインジケーターの表示
  pagination: {
    el: ".swiper-pagination",
  },
  // 前後スライドボタンを表示
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  loop: true, // ループの有効化  
  slidesPerView: 1.2, // 表示するスライドの枚数
  centeredSlides : true, // スライドを中央揃えを有効化
  effect: "coverflow",
  coverflowEffect: {
    rotate: 0, // 回転角度
    stretch: 50, // 間隔（px単位）
    depth: 200, // pxで奥行き
    modifier: 1, // 角度
    slideShadows : true, // 先頭のbox-shadow
  },
});

エフェクトで使うパラメータ

coverflowEffect: のプロパティは、角度・奥行きなど立体的なエフェクトをつけられます。

Swiper
coverflowEffect: {
    rotate: 0, // 回転角度
    stretch: 50, // 間隔（px単位）
    depth: 200, // pxで奥行き
    modifier: 1, // 角度
    slideShadows : true, // 先頭のbox-shadow
  },

プログレスバー付きのスライダー

スライダーの表示に合わせて、上部のプログレスバーも連動させるUIです。

その1
その2
その3

コードを表示する

HTML 

<div class="wrapper">
    <div class="sample-swiper carousel no-shadow">
      <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide">
            <div class="item itemBlue">その1</div>
          </div>
          <div class="swiper-slide">
            <div class="item itemRed">その2</div>
          </div>
          <div class="swiper-slide">
            <div class="item itemBlack">その3</div>
          </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>
      </div>
      <!-- Slider main container -->
    </div>
  </div>

Swiper JS 

const swiper = new Swiper(".swiper-container", {
  pagination: {
    el: ".swiper-pagination",
    type: "progressbar",
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

プログレスバーで使うパラメータ

プログレスバーは、pagination: にtype: "progressbar", で表示できます。その時、el: ".swiper-pagination" も一緒に指定するようにしましょう。

Swiper
pagination: {
  el: ".swiper-pagination",
  type: "progressbar",
},

3つのコンポーネントを表示するスライダー

コンポーネントを、表示域に3つ表示させたスライダーです。

その1
その2
その3
その4
その5
その6

コードを表示する

HTML 

<div class="wrapper">
    <div class="sample-swiper carousel no-shadow">
      <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide Slide2">
            <div class="item itemBlue">その1</div>
          </div>
          <div class="swiper-slide Slide2">
            <div class="item itemRed">その2</div>
          </div>
          <div class="swiper-slide Slide2">
            <div class="item itemBlack">その3</div>
          </div>
          <div class="swiper-slide Slide2">
            <div class="item itemBlue">その4</div>
          </div>
          <div class="swiper-slide Slide2">
            <div class="item itemRed">その5</div>
          </div>
          <div class="swiper-slide Slide2">
            <div class="item itemBlack">その6</div>
          </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>
      </div>
      <!-- Slider main container -->
    </div>
  </div>

Swiper JS 

const swiper = new Swiper(".swiper-container", {
  pagination: {
    el: ".swiper-pagination",
  },
  // 前後スライドボタンを表示
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  loop: true, // ループの有効化
  slidesPerView: 3.0,
  slidesPerGroup: 1,
  initialSlide: 1,
  spaceBetween: 15,
  centeredSlides : true,
});

一度に表示するスライドの数を指定するパラメータ

slidesPerView のパラメータでは、一度に表示するスライドの数を指定できます。

例えばslidesPerView: autoの場合、100%の幅に1個のスライドを表示します。slidesPerView: 2.5の場合では、2.5個のスライドを表示したりと、小数点での指定もできるパラメータです。

Swiper
slidesPerView: 3.0,

さいごに

いかがでしたでしょうか？Swiperは超定番のライブラリなので、既にご存知の方も多いと思いますが、改めて見ると本当によくできているライブラリで、カスタマイズも容易なのも非常に嬉しいところです。

この記事で紹介したパラメータや、モジュールは、Swiperで使える全体のごく一部でこれ以外にたくさんあります。

外部リンク 利用できるパラメータやモジュール（英語）

これらのパラメータをいじるだけでも簡単にUIを変更できるので、是非色々いじってみてください。

参考サイト

参考SwiperSwiper公式サイト

前の記事

ヘッダーのアニメーション
jQueryのコピペでヘッダーにアニメーションをつけて固定表示…

次の記事

JavaScriptの.remove()で要素の削除
要素の削除

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら