Swiper.jsを用いたスライダーの実装方法

◎今回伝えたいこと

JavaScriptのプラグインを用いることにより必要な機能の簡易実装が可能です。また、他プラグインとのモバイルファーストにおける差別化が挙げられるため今回紹介します。

◎テーマを決めた背景

Webサイトに写真やコンテンツをきれいに見せるための「スライダー」は欠かせません。他の方法でスライダーを自力で作ろうとすると、スマホでの操作や動きを滑らかにするのがとても難しいです。そこで、Swiper.jsというプラグインを使えば、難しい設定なしに、スマホのタッチ操作にもしっかり対応した、動きの良いスライダーを簡単に作れるようになるので、技術シェアのテーマとして選びました。

◎技術内容

◆swiperの導入方法

今回はCDNでプラグインを読み込みます。(ダウンロードする方法もあります。)
linkタグのコードはhead内に記入し、scriptタグのコードはbodyの終わる直前に書きます。


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

◆swiperの基本的な書き方

一番シンプルなスライダーを書きていきます。

HTML


        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="画像パス" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="画像パス" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="画像パス" alt="" />
            </div>
          </div>
        </div>

※注意点
class名を変えると動かないので注意！！

CSS


        .swiper-slide img {
        height: auto;
        width: 100%;
        }

JavaScript


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

上記の3つを合わせると下のスライダーになります。

See the Pen Untitled by daisuke (@daisuke-the-sans) on CodePen.

◆オプションの追加

オプションにはパラメーターとモジュールがあり以下の様に書きます。

JavaScript


        const swiper = new Swiper(".swiper", {
          パラメータ名1: 設定値,
          パラメータ名2: 設定値,
          モジュール名1: {
            パラメータ名A: 設定値,
            パラメータ名B: 設定値,
          },
        });

See the Pen Untitled by daisuke (@daisuke-the-sans) on CodePen.

  • ループ 
    
        loop: true, // デフォルトはfalse
  • フェイド 
    
        effect: 'fade', // フェード
  • 前後の矢印(ナビゲーション) 
    
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
    
        // 前後の矢印
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
  • ドットインジケーター(ページネーション) 
    
        <!-- ページネーション -->
          <div class="swiper-pagination"></div>
        
    
        // ページネーション
          pagination: {
            el: ".swiper-pagination",
            clickable: true, // クリック有効化
          },

◎課題点

機能が豊富なためすべてを使いこなすにはそれなりの学習コストが必要なことやモダンブラウザが中心であることなどが挙げられます。