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

javascript
2024.06.27
この記事は約7分で読めます。

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.

エフェクト

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

Swiperで実現する魅力的なエフェクト
Swiper.jsでは、さまざまなエフェクトを提供しており、それぞれのエフェクトには特定の設定オプションがあります。 専用のエフェクトに対応する専用の設定オプションが用意されていますが、他のエフェクトにもそれに類似した機能があります。以下に
pretty-cute.info

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を活用すれば、視覚的に美しいコンテンツスライダーを簡単に作成でき、ユーザー体験を向上させることができます。

コメント