【HTML&CSS】Swiper.jsを使ってスライダーを3分で実装する方法

こんにちはHTML&CSS初心者のhimakuroです

今回の記事ではswiper.jsというライブラリを活用してポートフォリオにスライダーを実装していきます。

今回作るもの

TwitterやInstagramのようなSNSでユーザーのリスト表示をしたいときに使えるようなデザインです。アイコン＋名前を記載し、その下に説明文を記載します。

swiper slider

前回の記事

前回の記事ではヘッダーをスクロールした際にも画面上部に固定されるように実装しました。

kuro-engineer-log.hatenablog.com

Swiper.jsを導入する

Swiper

Swiper.jsとはjQueryなどを使わずに簡単にスライダーが実装できるライブラリです。

使い方としてはダウンロードしてプロジェクトのフォルダに格納する方法と、CDNで配信されている物を使う2通りがあります。

今回はお手軽なCDNで配信されているものを利用する方針にします。

index.html

<html>
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">
  </head>
  <body>
  〜中略〜
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
</html>

これだけで導入が出来ました。とても簡単ですね。

スライダーの雛形を実装していく

まずはスライダーの見た目部分を作成していきます。

Swiper.jsを機能させるためには、下記の3つのclassを持ったdivを用意してあげる必要があります

swiper-container
swiper-wrapper
swiper-slide

swiper-slide の中にはスライドさせる要素を入れて行きます。
今回は仮で swiper-inner というクラスを付加したdivクラスを作成し、文言をpタグの中に入れてみました。

index.html

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-inner">
        <p>コメント1</p>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-inner">
        <p>コメント2</p>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-inner">
        <p>コメント3</p>
      </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

この内容を記述した後に
画面を開きスライド機能を持った要素が画面に表示されればOKです

スライドを機能させる

スライダーは画面に表示されましたが、まだこれだけでは実際に矢印をクリックしてもスライドしてくれません。

Swiper.jsでスライダーを機能させるためには、JavaScriptを少しだけ記述してあげる必要があります。

index.html

  <body>
  〜中略〜
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    });
  </script>
</html>

swiper.min.js を読み込むための記述の1行したに、新たなScriptタグを記述しSwiperのインスタンスを作成してあげます。

また、その際には navigation のオプションを付加してあげることで、左右の矢印を機能させていきます。

上記のコードを追加して画面をリロードしたら矢印が機能するようになればOKです。

スライダーをループさせる方法

Swiper.jsには様々なオプションが用意されていますが、その中にはループ機能もあります。

このループ機能を有効化する事で、スライダーが最後まで行ったら最初に戻るように設定出来ます。

index.html

  <body>
  〜中略〜
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true, // 追加
    });
  </script>
</html>

ループ機能を有効化する方法はとても簡単で loop: true の1行を追加するだけでOKです。

一定時間ごとに自動でスライダーが動くようにする

最後に数秒毎にスライダーが自動でスワイプするようにしていきます。

index.html

  <body>
  〜中略〜
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true,
        autoplay: {
            delay: 5000,
        },
    });
  </script>
</html>

先程の loop の1行したに autoplay のオプションを追加しましょう。

ここで指定する delay はmsecなので 5000 と指定した場合は5秒という扱いになります。