初心者でも簡単Swiperの使い方完全ガイド

2024年1月3日2024年9月9日

Swiperは、ウェブサイトにスライダーを追加するのに便利なツールです。
使い方が簡単で、初心者でもスタイリッシュなスライダーをサクッと作れるのが特徴です。

この記事では、Swiperの基本的な使い方から実用的なカスタマイズ例まで紹介します。

必要な時にすぐ参照できるよう、ブックマークしておくと便利です！

Swiperの基本：スライダーライブラリとしての特徴

Swiperは、使い勝手が良く、柔軟性の高いスライダーライブラリです。

その最大の特徴は、下記のようになります。

レスポンシブ対応
タッチジェスチャーにも対応
カスタマイズ性が非常に高い

基本的なスライドショーから、複数のスライド、縦方向のスライド、フェード効果など、多様なスタイルが設定できます。

また、Swiperは非常に軽量で、ページの読み込み速度にほとんど影響を与えません。

これは、特にモバイルユーザーにとって重要なポイントです。

Swiperのもう一つの大きな利点は、その設定のしやすさです。

初心者でも分かりやすいドキュメンテーションが用意されており、基本的な設定から応用的なカスタマイズまで、ステップバイステップで学べます。

これにより、初心者でも手軽におしゃれなスライダーを導入することができます。

Swiperのインストール方法と初期設定

Swiperのインストールは非常にシンプルで、初心者の方でも簡単に行えます。

まず、Swiperをウェブサイトに追加するためには、Swiperの公式サイトから必要なファイルをダウンロードするか、CDNを使用します。

CDNを使用する場合、HTMLファイルのセクションに、SwiperのCSSファイルとJavaScriptファイルへのリンクを追加する必要があります。

Swiper公式ページの各種インストールページからCDNと書かれた場所を見つけて下さい。

Swiper公式ページの各種インストールページのCDNセクションのスクリーンショット① — Swiper公式ページの各種インストールページ

ここからcssとJavaScriptの読み込み用のコードをコピーして、使いたいプロジェクトに貼り付けます。

Swiper公式ページの各種インストールページのCDNセクションのスクリーンショット② — Swiper公式ページの各種インストールページ

コピーした後のプロジェクトのは以下のようになります。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- swiper -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  <link rel="stylesheet" href="css/style.css">
  <title></title>
</head>

<body>
  <main>
  </main>
  <!-- swiper -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script src="js/script.js"></script>
</body>

</html>

次に、Swiperを初期化する必要があります。

HTMLにSwiperのコンテナを設定し、対応するJavaScriptコードを記述することで行います。

まずはSwiperのコンテナとスライドを表示したい場所に追加します。

画像は任意の画像を追加して下さい

    <div class="swiper">
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide"><img src="https://picsum.photos/1920/1080"></div>
        <div class="swiper-slide"><img src="https://picsum.photos/1920/1079"></div>
        <div class="swiper-slide"><img src="https://picsum.photos/1920/1078"></div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>

次にに、スライドショーがうまく動くように、少しJavaScriptのコードを追加します。これは、スライドショーの設定をするためのもので、次のように書きます。

これはそのまま自分のJavaScriptファイルにコピペでOKです！

const swiper = new Swiper('.swiper', {
  // オプションの設定
  loop: true, // ループ機能を有効化

  // ページネーションの設定
  pagination: {
    el: '.swiper-pagination',
  },

  // ナビゲーションボタンの設定
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

これで基本的な設定は完了です！

最後にimgに下記のCSSを当てて置くときれいに表示されます。

img{
    width: 100%;
    height: auto;
    object-fit: cover;
}

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.

完成したHTMLは以下のようになります。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- swiper -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  <link rel="stylesheet" href="css/style.css">
  <title></title>
</head>

<body>
  <main>
    <div class="swiper">
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide"><img src="https://picsum.photos/1920/1080"></div>
        <div class="swiper-slide"><img src="https://picsum.photos/1920/1079"></div>
        <div class="swiper-slide"><img src="https://picsum.photos/1920/1078"></div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>

  </main>
  <!-- swiper -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script src="js/script.js"></script>
</body>

</html>

スライダーの実用例とカスタマイズ方法

Swiperでは、スライダーの見た目や挙動をカスタマイズすることができます。

Swiperの主なオプションは下記のようになっています。

オプション名	説明
`slidesPerView`	一度に表示するスライドの数。数値で指定。
`spaceBetween`	スライド間のスペース（ピクセル単位）。
`loop`	スライドのループ（繰り返し）機能。`true`または`false`で設定。
`direction`	スライダーの方向。`horizontal`または`vertical`で指定。
`autoplay`	自動再生の設定。`delay`（遅延時間）をミリ秒で指定。
`pagination`	ページネーションの設定。`el`で要素を指定、`clickable`でクリック可能か設定。
`navigation`	ナビゲーションボタン（次へ、前へ）の設定。`nextEl`、`prevEl`で要素を指定。
`scrollbar`	スクロールバーの設定。`el`で要素を指定。
`breakpoints`	レスポンシブブレイクポイントの設定。画面サイズに応じたオプションを指定。

Swiperにはさらに多くのオプションがあり、高度なカスタマイズが可能です。

詳しくは公式を確認して下さい。

Swiper公式ページへ

以下にカスタマイズの例を紹介します。

スライドの表示数を変更する

const swiper = new Swiper('.swiper', {
  // オプションの設定
  loop: true, // ループ機能を有効化

  // ページネーションの設定
  pagination: {
    el: '.swiper-pagination',
  },

  // ナビゲーションボタンの設定
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  slidesPerView: 3,
});

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.

自動再生を設定する

スライダーを自動的にスライドさせたい場合は、autoplayオプションを使用します。以下のように設定すると、指定した時間間隔で自動的にスライドが切り替わります。

const swiper = new Swiper('.swiper', {
  // オプションの設定
  loop: true, // ループ機能を有効化

  // ページネーションの設定
  pagination: {
    el: '.swiper-pagination',
  },

  // ナビゲーションボタンの設定
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  slidesPerView: 3,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
});

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.

流れ続けるスライダーの設定

スライダーを滑らかに無限に流れるように設定することもできます。これはloopとspeedオプションを使って実現します。以下の設定では、スライドが継続的に流れる効果を作り出します。

const swiper = new Swiper('.swiper', {
  loop: true,
  slidesPerView: 3,
  speed: 3000,
  allowTouchMove: false,
  autoplay: {
    delay: 0,
  },
});

また、CSSでスライドが等速に流れるようにに下記の記述が必要です。

.swiper-wrapper {
    transition-timing-function: linear;
}

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.

ふわっと切り替わるスライダー

See the Pen ふわっと切り替わるスライダー by ryoma (@hwjgdjpk-the-decoder) on CodePen.

effect: ‘fade’で切り替わりのエフェクトを変更し、speedオプションでスピードを調整します。

const swiper = new Swiper('.swiper', {
  // オプションの設定
  loop: true, // ループ機能を有効化
  effect: 'fade', // フェード効果を適用
  fadeEffect: {
    crossFade: true // クロスフェード効果を有効化
  },
  autoplay: {
    delay: 5000, // 自動再生の遅延時間（5秒）
    disableOnInteraction: false, // ユーザー操作後も自動再生を続行
  },
  speed: 1000, // アニメーションの速度を1秒に設定
});

サムネイル付きスライダー

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.

サムネイルと連携したスライダーも実装可能です。

        <div class="swiper swiper-main">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide01">
              <img src="https://picsum.photos/1920/1080">
            </div>
            <div class="swiper-slide swiper-slide01">
              <img src="https://picsum.photos/1920/1079">
            </div>
            <div class="swiper-slide swiper-slide01">
              <img src="https://picsum.photos/1920/1078">
            </div>
            <div class="swiper-slide swiper-slide01">
              <img src="https://picsum.photos/1920/1077">
            </div>
          </div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
        <div class="swiper swiper-thumb">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide01">
              <img src="https://picsum.photos/1920/1080">
            </div>
            <div class="swiper-slide swiper-slide01">
              <img src="https://picsum.photos/1920/1079">
            </div>
            <div class="swiper-slide swiper-slide01">
              <img src="https://picsum.photos/1920/1078">
            </div>
            <div class="swiper-slide swiper-slide01">
              <img src="https://picsum.photos/1920/1077">
            </div>
          </div>
        </div>

.swiper{
  width: 70%;
}
.swiper-main{
  height: 300px;
}
.swiper-main img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.swiper-thumb {
    margin-top: 5px;
  height: 200px;
}
.swiper-thumb img{
object-fit: cover;
width: 100%;
  height: 100%;
}

.swiper-thumb .swiper-slide {
    opacity: .5;
    transition: opacity .5s ease;
    cursor: pointer;
}

.swiper-thumb .swiper-slide.swiper-slide-thumb-active {
    opacity: 1;
}

window.onload = function () {
  const swiper_thumb = new Swiper('.swiper-thumb', {
    slidesPerView: 4,
    // 以下の設定を追加
    watchSlidesVisibility: true, // サムネイルの可視性を追跡
    watchSlidesProgress: true, // スライドの進行状況を追跡
  });
  const swiper = new Swiper('.swiper-main', {
    spaceBetween: 20,
    slidesPerView: 1,
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    thumbs: {
      swiper: swiper_thumb,
    },
  });

  // メインスライダーが変更されたときに実行
  swiper.on('slideChange', function () {
    let currentIndex = swiper.realIndex; // 現在のインデックスを取得
    swiper_thumb.slideTo(currentIndex, 300, false); // サムネイルスライダーを同期
  });
};