2025.01.17

初心者向け!JSライブラリ「Swiper」の使い方ガイド

AUTHOR

Webサイトにスライダー(カルーセル)を導入するのに便利なJSライブラリ「Swiper」。初心者でも簡単に美しいスライダーを作成できるこのライブラリの基本的な使い方を、分かりやすく解説します。

Swiperとは?

Swiperは、レスポンシブデザインに対応した軽量でパワフルなスライダーライブラリです。スマートフォンやタブレットといったタッチデバイスでの操作性も抜群で、カスタマイズの自由度が高いのが特徴です。また、jQueryを必要とせず、純粋なJavaScriptで動作するため、軽量かつモダンな開発環境に最適です。

公式サイト:Swiper.js

1. Swiperの基本セットアップ

まずは、SwiperをWebページに導入する方法を解説します。

必要なファイルをインストール

Swiperを使うには、ライブラリ本体のCSSとJavaScriptファイルを読み込む必要があります。
以下のコードをHTMLファイルの<head>と<body>に追加してください。

<!-- Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

2.HTML構造を準備する

次に、スライダーを作成するためのHTML構造を用意します。

<div class="swiper">
  <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>

swiper: スライダー全体を囲むコンテナ

swiper-wrapper: スライドを包むラッパー

swiper-slide: 各スライドの要素

swiper-paginationやswiper-button-prevはオプション機能です。

CSSでデザインを追加

初期状態の見た目では分かりづらい場合があるため、以下のデザインを適用して視覚的に分かりやすく仕上げます。

<style>
 .swiper-wrapper {
    /* サイズ調整 */
    width: 100%;
    height: 300px;
  }

  .swiper-slide {
    /* 文字配置調整、背景色設定 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    background-color: #dfe7fd;
  }
</style>

3.JavaScriptで初期化する

HTML・CSSが準備できたら、Swiperを初期化します。

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const swiper = new Swiper('.swiper', {
      // 基本的な設定
      loop: true, // ループさせる
      pagination: {
        el: '.swiper-pagination', // ページネーションの要素
        clickable: true, // クリック可能にする
      },
      navigation: {
        nextEl: '.swiper-button-next', // 次へボタン
        prevEl: '.swiper-button-prev', // 前へボタン
      },
      
    });
  });
</script>

これで基本のスライダーを作成することができます。

Slide 1
Slide 2
Slide 3

4.1ページに複数のスライダーを設置する方法

Swiperは、1つのページに複数のスライダーを設置することも簡単です。それぞれのスライダーに異なるclassやidを割り当てて初期化すればOKです。

<div class="swiper slider1">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slider 1 - Slide 1</div>
    <div class="swiper-slide">Slider 1 - Slide 2</div>
    <div class="swiper-slide">Slider 1 - Slide 3</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

<div class="swiper slider2">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slider 2 - Slide 1</div>
    <div class="swiper-slide">Slider 2 - Slide 2</div>
    <div class="swiper-slide">Slider 2 - Slide 3</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

JavaScriptで初期化

それぞれのスライダーを個別に初期化します。

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const slider1 = new Swiper('.slider1', {
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });

    const slider2 = new Swiper('.slider2', {
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  });
</script>

この方法で、それぞれ異なる設定のスライダーを1ページ内に設置できます。

5.よく使うオプション

Swiperには多くのカスタマイズオプションがあります。いくつかよく使われるものを紹介します。

スライドの表示数を変更

複数のスライドを一度に表示したい場合:

const swiper = new Swiper('.swiper', {
  slidesPerView: 3, // 一度に表示するスライド数
  spaceBetween: 20, // スライド間の余白(px単位)
});

自動再生

スライダーを自動で動かす場合:

const swiper = new Swiper('.swiper', {
  autoplay: {
    delay: 3000, // 3秒ごとにスライド
    disableOnInteraction: false, // ユーザー操作後も再開する
  },
});

フェードエフェクト

スライダーの切り替えをフェードで表現:

const swiper = new Swiper('.swiper', {
  effect: 'fade',
  fadeEffect: {
    crossFade: true,
  },
});

6.まとめ

Swiperは、初心者でも簡単に使えるだけでなく、拡張性が高くプロフェッショナルなスライダーを作成できます。この記事では基本的なセットアップと使い方を紹介しましたが、さらに高度な機能やデザインカスタマイズに挑戦したい方は公式ドキュメントを参照してみてください。

公式ドキュメント:Swiper API Documentation

これで、あなたのWebサイトにも素敵なスライダーが簡単に導入できるはずです!

戸田@ドアズ社長ブログ

  • No items
PAGE TOP