Swiperのpaginationが表示されない時にチェックすべきこと

あれ？

Swiperのページネーションが表示されない・・・。

Swiperでスライド画像を作成しているとき、いつも表示されるはずのpagination（ページネーション）が表示されない、なんて困ってませんか？

そこで今回は、Swiperのページネーションが表示されない時のチェック項目を、わかりやすく解説。

本記事の通りにチェックすれば、表示されない原因がかならず特定できますよ！

Swiperのpaginationが表示されない時のチェック項目

Swiperのページネーションが表示されない原因は、次の4つです。

順番にチェックしてみましょう！

原因①：HTMLの記述漏れ

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>

原因②：Swiperが正しく読み込まれていない

Swiperのページネーションが表示されないのは、Swiper自体が正しく読み込まれていない可能性があります。

Swiperを使うには、専用のCSSとJavaScriptを読み込むことが必須。

しかし、正しく読み込まないと、Swiperが動かないだけでなくページネーションやその他のパーツも表示されない原因になります。

もし、ページネーションが表示されないだけでなくSwiper自体も動かない場合には、「Swiperが動かない原因はコレ！5つのチェック項目と解決方法」を参考に修正してください。

原因③：JavaScriptにページネーションのパラメータを記述していない

意外とあるのが、JavaScriptにページネーション・パラメータを書き忘れていることです。

ページネーションを表示するには、下記のようにJavaScriptに「ページネーションを使いますよ」と宣言しなければいけません。

もしこの記述を忘れると、ページネーションは表示されません。

const swiper = new Swiper('.swiper', {
  pagination: {
    el: '.swiper-pagination',
  },
});

原因④：間違った方法でページネーションを画像の外に出そうとしている

Swiperのよくあるカスタマイズに「ページネーションを画像の外に出す」がありますが、やり方を間違えるとページネーションは消えてしまいます。

ページネーションはposition: absoluteで配置されており、topやbottomの値を変えることで位置を自由に動かすことができますが、画像の外側に表示することはできません。

これは、親要素である「.swiper」には、overflow: hiddenが設定されているからです。

そのため、ページネーションを画像の外に出すには「テクニック」が必要です。

こちらについては「Swiperのページネーションを外に出す方法」で詳しく解説していますので、参考にしてください。

まとめ

今回は、Swiperのpaginationが表示されない原因と解決方法について解説しました。

チェック項目は、次の４つです。

上記がクリアできれば、ページネーションは正しく表示されるはずですので、チェックしてみてください。