【Swiper】簡単！ドラッグ操作できるカード型スライダーを作る方法

みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。

Web制作ではスライダーという画像などのコンテンツをスライド形式で流す表現方法があります。

トップページのメインビジュアルをフェードさせたり、画面上に収まらないコンテンツを部分的に見せたり、凡庸性の高い手法としてよく使われています。

今回はスライダーのライブラリー「Swiper」を使ったカード型スライダーの作り方について紹介します。

Table of Contents

自由自在にカスタマイズができる「Swiper」

Swiperはスライダーを作ることができるライブラリです。

数あるスライダーのライブラリの中でも非常に使われることが多いです。

0から作るのは簡単ではないスライダーですが、こうしたライブラリを使うことで比較的容易に作成できます。

よく比較される「slick」と比べてJQueryを使わずに作成できるのも利点です。

今回はGIFのようにドラッグ、スワイプで動かすことができるスライダーの作り方を紹介します。

Swiperのオプションの一つである「Effect cards」を適用することで簡単に作れます。

XDでのカード型スライダーの作り方も紹介しています！

合わせて読みたい

2022年1月16日【Adobe XD】ドラッグトリガーでスライダーを作ってヌルヌル動かす

Swiperを使ったスライダーの作成方法

npmなどの作成方法もありますが、コードを読み込ませるだけで手軽にできるCDNの方法で作成していきます。

作成手順

CDNを読み込ませる
Swiperの基本レイアウトの配置
CSSのカスタマイズ
Swiperのオプション設定。effects:”cards”の適用

CDNを読み込ませる

CDNを読み込ませます。

下記コードを読み込ませるか、公式ドキュメントに移動してコピーして下さい。

Swiper専用のJavaScriptとCSSを記入します。

どちらも必ず読み込ませます。

HTML

<!-- head内に配置 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css
/>

<!-- body直前に配置 -->
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

Swiperの基本レイアウトの配置

デフォルトレイアウトを読み込ませます。

ページネーション、ナビゲーション、スクロールバーはない状態でも動作するのでプロジェクトに合わせて追加しましょう。

下記コードを記入して下さい。

HTML

<!-- スライダー本体 -->
<div class="swiper">

  <!-- 追加で必要なラッパー-->
  <div class="swiper-wrapper">

    <!-- スライド -->
    <div class="swiper-slide">Slide 1（テキストや画像のコンテンツなど）</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>

  <!--ページネーション -->
  <div class="swiper-pagination"></div>

  <!-- ナビゲーションボタン -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- スクロールバー -->
  <div class="swiper-scrollbar"></div>
</div>

CSSのカスタマイズ

CSSのカスタマイズして、適切なサイズを適用します。

カード型のため縦長のサイズにしています。

CSS

//Swiper 本体
.swiper {
  width: 240px;
  height: 320px;
}

//スライド全体
.swiper-slide {
  display: flex;
  align-items: center;
   justify-content: center;
  border-radius: 18px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}

Swiperのオプション設定

Swiperのオプションから「effects:”cards”」に設定し、カード型のスライダーに設定します。

これで完了です。

JavaScript

<script>
 var swiper = new Swiper(".mySwiper", {
 effect: "cards", //カードエフェクトを適応
 grabCursor: true, 
 });
</script>

完成した全コード

全行程を行って完成したコードが以下になります。

※HTMLに全てまとめたコードなので、CSS、Javascriptは別ファイルで管理するのをオススメします。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
    />

    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      body {
        background: #fff;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .swiper {
        width: 240px;
        height: 320px;
      }

      .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        font-size: 22px;
        font-weight: bold;
        color: #fff;
      }

   
    </style>
  </head>

  <body>
    <!-- Swiper -->

    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
    </div>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        effect: "cards",
        grabCursor: true,
      });
    </script>
  </body>
</html>