アジェンダ

HTMLとJavaScriptで利用できるスライダープラグイン「Swiper」を使ったカルーセルスライダーの実装方法について、サンプルコードを参考にしながら、基本的な設定とカスタマイズの方法について簡単に記述します。

Swiperとは？

Swiperは、レスポンシブなスライダーやカルーセルを作成できるJavaScriptライブラリです。軽量でカスタマイズ性が高く、タッチ対応もしているため、スマートフォンやタブレット向けのスライダーにも最適です。

※以下はSwiperのHPになります。

Swiperのインストール方法

SwiperはCDNを利用して簡単に組み込むことができます。まず、以下のようにHTMLファイルにSwiperのスタイルシートとスクリプトを追加します。

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

このコードを<head>タグの中に入れて、スタイルシートとJavaScriptファイルをインポートします。

※以下はGetting Startedになります。

Swiperの基本構造

Swiperを利用するためには、HTML構造に特定のクラスを設定する必要があります。以下は、Swiperを利用したシンプルなスライダーのHTML構造の例です。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="./assets/img/item-card-img-1.png" alt="商品1">
      <p>商品名1</p>
    </div>
    <div class="swiper-slide">
      <img src="./assets/img/item-card-img-2.png" alt="商品2">
      <p>商品名2</p>
    </div>
    <div class="swiper-slide">
      <img src="./assets/img/item-card-img-3.png" alt="商品3">
      <p>商品名3</p>
    </div>
    <!-- さらにスライドを追加 -->
  </div>
</div>

swiperクラス: スライダー全体を囲むコンテナ。
swiper-wrapperクラス: スライドを包むラッパー。
swiper-slideクラス: 各スライドのコンテンツ。

Swiperの初期化

次に、Swiperの初期化コードを追加します。このコードは<script>タグ内に記述し、スライドの表示や動作をカスタマイズします。

var swiper = new Swiper(".swiper", {
  slidesPerView: "auto",       // スライドの表示枚数を自動に設定
  spaceBetween: 1,             // スライド間のスペース
  grabCursor: true,            // カーソルを掴むような効果
  mousewheel: {                // マウスホイールでの操作設定
    enabled: true,             // マウスホイール操作を有効に
    sensitivity: 5,            // 感度を設定
    forceToAxis: true,         // 水平方向のみに制限
  },
});

設定オプションの解説

slidesPerView: 一度に表示されるスライドの数を指定します。"auto"を指定すると、スライドのサイズに応じて自動的に調整されます。
spaceBetween: スライド同士の間隔をピクセル単位で設定します。
grabCursor: カーソルが掴むような見た目になるエフェクトを追加します。
mousewheel: マウスホイールでのスライド移動を可能にし、感度や方向を設定します。

Swiperのカスタマイズ

Swiperには多くのオプションがあり、ニーズに応じてさまざまなカスタマイズが可能です。たとえば、以下のようにページネーションやナビゲーションボタンを追加することもできます。

ページネーションの追加

var swiper = new Swiper(".swiper", {
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

ナビゲーションボタンの追加

var swiper = new Swiper(".swiper", {
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

自動スライド

var swiper = new Swiper(".swiper", {
  autoplay: {
    delay: 3000,  // 3秒ごとにスライドを自動切り替え
  },
});

まとめ

Swiperは、簡単に導入でき、豊富なカスタマイズオプションを提供するスライダープラグインです。今回紹介した基本的な設定をもとに、さらに高度なスライダーを作成することが可能です。ぜひ、実際のプロジェクトでSwiperを活用してみてください。