Swiperを使ったスライダーの基本実装

Swiperは、ウェブ開発における高機能なスライダーライブラリで、JavaScriptで実装されています。特にモバイルデバイスやタブレットに対応したタッチスライダーとして人気があります。

その主な特徴には、タッチコントロールによるスワイプ操作のサポート、デバイスの画面サイズに応じたレスポンシブデザイン、多彩なカスタマイズオプションが含まれます。これにより、ユーザーは写真ギャラリー、製品スライダー、コンテンツカルーセル、バナー表示などを簡単に作成できます。

Swiperは詳細なドキュメントと豊富なサンプルコードが提供されており、開発者は迅速に学び実装することが可能です。視覚的に魅力的なスライドショーを提供するための信頼性の高いツールとして、多くのプロジェクトで利用されています。

コード
まとめ

コード

枠組みを用意する

まずは必須のclassでhtmlを用意します。

<div class="swiper">
  <!-- スライド要素を包む要素 -->
  <div class="swiper-wrapper">
    
  </div>
</div>

HTML

要素を追加する

要素を追加します。swiper-slideというclass名を追加します。

<div class="swiper">
  <!-- スライド要素を包む要素 -->
  <div class="swiper-wrapper">
    <div class="swiper-slide slide1">
      <p>No.1</p>
    </div>
    <div class="swiper-slide slide2">
      <p>No.2</p>
    </div>
    <div class="swiper-slide slide3">
      <p>No.3</p>
    </div>
  </div>
</div>

HTML

スライドさせる

クリックしたまま、要素をスライドさせると要素がスライドします。

要素を追加して、初期化してあげるだけで動作します。

const swiper = new Swiper(".swiper",{});

JavaScript

See the Pen Swiper.jsとは by sho-ta (@sho-ta) on CodePen.

次へ、前の矢印を追加する

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

HTML

    navigation: { // ナビゲーションボタン
    nextEl: '.swiper-button-next', // 次のボタンのセレクタ
    prevEl: '.swiper-button-prev', // 前のボタンのセレクタ
  },

JavaScript

See the Pen Swiper.jsとは2 by sho-ta (@sho-ta) on CodePen.

ページネーションを追加する

ページネーションの要素とjsのページネーションのパラメータを追加します。

<div class="swiper-pagination"></div>

HTML

    pagination: { // ページネーション
    el: '.swiper-pagination', // ページネーションのセレクタ
    type: 'bullets',          // ページネーションのタイプ（bullets | fraction | progressbar | custom）
    clickable: true,          //true指定でページネーションのアイコンをクリックすると対応するスライドに移動
  },

JavaScript

See the Pen Untitled by sho-ta (@sho-ta) on CodePen.

エフェクト

色んなエフェクトがあります。

See the Pen Swiper.jsとは4 by sho-ta (@sho-ta) on CodePen.

ループ、自動再生、速度

3つのパラメータを追加しました。

  loop: true,      // スライダーをループさせる
  speed: 300,      // スライド切り替えの速度（ミリ秒）
  autoplay: {      // 自動再生設定
    delay: 3000,               // スライド間の遅延（ミリ秒）
    disableOnInteraction: true //ユーザーがスライダーとのインタラクション（例: スワイプ、クリック）を行った後も自動再生が停止
  },

JavaScript

See the Pen Swiper.jsとは5 by sho-ta (@sho-ta) on CodePen.

その他のパラメーター

Swiperのパラメーターは非常に多くあります。パラメーターの種類。

const swiper = new Swiper('.swiper', {
   direction: 'horizontal',     // スライダーの方向（horizontal | vertical）
   slidesPerView: 1,            // 表示するスライドの数（auto または 数値）
   slidesPerGroup: 1,           // グループでスライドする数
   slidesPerColumn: 1,          // 列ごとに表示するスライド数
   spaceBetween: 0,             // スライド間のスペースを0pxに設定
   grabCursor: false,           // カーソルを掴む手の形に変更する
   scrollbar: { // スクロールバー
     el: '.swiper-scrollbar',  // スクロールバーのセレクタ
     draggable: true,          // ドラッグ可能にする
   },

   keyboard: { // キーボード操作
     enabled: true,           // キーボード操作を有効にする
     onlyInViewport: true,    // ビューポート内のみ有効にする
   },
  
   mousewheel: { // マウスホイール操作
     enabled: true,           // マウスホイール操作を有効にする
   },
});

JavaScript

まとめ

Swiperは、スワイプ操作に優れたインターフェースを提供し、レスポンシブデザインに対応した魅力的なスライダーを簡単に実装できる強力なライブラリです。多彩なカスタマイズ機能を持ち、直感的に扱えるため、初心者から上級者まで幅広い開発者に利用されています。画像ギャラリーやカルーセル表示など、様々な用途に最適で、迅速な実装を可能にします。Swiperを活用すれば、視覚的に美しいコンテンツスライダーを簡単に作成でき、ユーザー体験を向上させることができます。