Swiperのpaginationが表示されないときは？これで解決！

2023年11月17日2023年11月27日

スライダーでページネーションがスライド画像の下に（もしくは上に）配置されているデザインってありますよね。

実務でこういったスライダーのコーディングをすることはとても多いですが、まだを使い慣れていない初学者のときはページネーションが表示されない…とつまずくことがよくあります。

今回はJavaScriptのプラグインである『Swiper』を使用して、ページネーションが表示されなくなる原因を解説します。

Swiperのpaginationが表示されない主な原因とは？
Swiperを動かすために必要なファイルと基本の実装コード
Swiperのpaginationが表示されないときの解決方法スバリ！
このまま使える、解決するための修正コード

Swiperのpaginationが表示されない主な原因とは？

ページネーションが表示されない原因・結論
Swiperを動かすために必要なファイルを準備
- ファイルを作成
- CDNを使用する
Swiper基本のhtmlコード
Swiper基本のJavaScriptコード
CSSコード

ページネーションが表示されない原因・結論

「ページネーションが表示されない原因」の結論を真っ先に言いますと、.swiperにはデフォルトでoverflow: hidden;が指定されているからです。

そのため、cssでページネーションのドット部分をスライドの外側に動かすと、表示されなくなってしまいます。

では、ページネーションが非表示にならない方法をここから実装していきます。

まずは基本となるSwiperを準備しましょう。

Swiperを動かすために必要なファイルを準備

必要なファイルはこの2つ（CSSファイル・JavaScriptファイル）です。

swiper-bundle.min.css
swiper-bundle.min.js

ファイルを作成

実務でSwiperを実装するときは、必ずファイルを作成して使用してください。
※バージョンがアップデートされたときにSwiperが動かなくなることがあるからです。
クライアント様に迷惑がかかる場合がありますので、重要ポイントです！

STEP

以下のページへ行き、「View Raw」をクリックし、コードを全てコピー

・swiper-bundle.min.css

・swiper-bundle.min.js

STEP

swiper-bundle.min.css と swiper-bundle.min.js というファイルを自分で作成し、それぞれコピーしたコードをペーストします

STEP

各ファイルを環境に合わせたフォルダに入れ、読み込みます

CDNを使用する

実務以外でSwiperを使用する場合は、CDNを使用して良いと思います。
（バージョンアップ時の心配をしたくない場合は、ファイルを作成して実装してください）

var.8の読み込みコードです。こちらをhtmlのheadタグ内に置きます。

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
 
<!-- JavaScript -->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

※今回コードペンのdemoではCDNを使用します。

Swiper基本のhtmlコード

次に基本となるSwiperのhtmlコードです。

<!-- Swiper ※必須 -->
<div class="swiper">
  <!-- スライドを囲むラッパー要素 ※必須 -->
  <div class="swiper-wrapper">
    <!-- スライド ※必須 -->
    <div class="swiper-slide"><img src="https://picsum.photos/800/600?random=1" alt=""></div>
    <div class="swiper-slide"><img src="https://picsum.photos/800/600?random=2" alt=""></div>
    <div class="swiper-slide"><img src="https://picsum.photos/800/600?random=3" alt=""></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>

Swiper基本のJavaScriptコード

以下はJavaScriptの必要最低限のコードです。

こちらに、実装に必要なオプション・パラメータを追加していくかたちになります。


let mySwiper = new Swiper ('.swiper', {
  // オプション
	loop: true, //最後までいったら先頭に戻る（ループ）
 
  //ページネーションの設定
  pagination: { 
    el: '.swiper-pagination',
    type: 'bullets', //ページネーションの種類
    clickable: true, //ページネーションクリックで動かす
  },
 
  //ナビゲーションボタンの設定
  navigation: { 
    nextEl: '.swiper-button-next', //「次へボタン」の指定
    prevEl: '.swiper-button-prev', //「前へボタン」の指定
  },
 
  //スクロールバーの設定
  scrollbar: { 
    el: '.swiper-scrollbar',
  },
});

ページネーション・ナビゲーション・スクロールバーは必要に応じて記載します（デザインにない場合は削除します）

CSSコード

CSSは画像を整えるために、下記のみ指定しておきます。

.swiper-slide img{
  width: 100%;
  height: 100%;
  aspect-ratio: 5/3;
  object-fit: cover;
}

ここまでのコードで、Swiper自体は機能します。

Swiperのpaginationが表示されないときの解決法

作業の流れ
修正したhtmlコード
修正したCSSコード
完成のデモ

作業の流れ

流れはこのようになります。

.swiper-paginationを.swiperの外に出し、.swiperと同じ階層にする
それらを覆う<div>を追加（※ここでは.swiper-boxというクラス名をつけます）
.swiper-boxにposition:relative;を指定する
.swiper-pagination-bullets.swiper-pagination-horizontalにbottom指定を上書きする

.swiper-boxを起点にして配置できるので、.swiperの指定に影響を受けなくなり、ページネーションを好きな位置に表示させることができます。

修正したhtmlコード

<div class="swiper-box">
  <!-- Swiper ※必須 -->
  <div class="swiper">
    <!-- スライドを囲むラッパー要素 ※必須 -->
    <div class="swiper-wrapper">
      <!-- スライド ※必須 -->
      <div class="swiper-slide"><img src="https://picsum.photos/800/600?random=1" alt=""></div>
      <div class="swiper-slide"><img src="https://picsum.photos/800/600?random=2" alt=""></div>
      <div class="swiper-slide"><img src="https://picsum.photos/800/600?random=3" alt=""></div>
    </div>
    <!-- ナビゲーションボタン ※必要に応じて -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- スクロールバー ※必要に応じて -->
    <div class="swiper-scrollbar"></div>
  </div>
  <!-- ページネーション ※必要に応じて -->
  <div class="swiper-pagination"></div>
</div>

修正したCSSコード

.swiper-box {
  position: relative;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  aspect-ratio: 5/3;
  object-fit: cover;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: -50px;
}