Swiper(jQuery)のpaginationだけがどうしても出ない時

参考にしたサイト
https://zero-plus.io/media/jquery-slider/#slick%E3%81%AE%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%E3%83%BB%E6%B3%A8%E6%84%8F%E7%82%B9

【Swiper】スライダーのエフェクトまとめ

しかし、どうしてもpaginationが表示されない…

そこで、まずカスタマイズでクラスを設定

pagination: {
      el: '.swiper-pagination',
    },

スライドたちを囲んでいるタグの中、もしくは外に空の<div class="設定したクラス名">を追加。

<div class="swiper">
  <div class="swiper-wrap">
      <div class="swiper-slide">Slide01</div>
      <div class="swiper-slide">Slide02</div>
      <div class="swiper-slide">Slide03</div>
  </div>
  <div class="swiper-pagination"></div> <!-- この行を追加　 -->
</div>

こんな感じ。(下から2番目の行)
※スライドを囲むタグの外に追加すると、positionでスライドの外側に配置したりできる様になる。親のタグにrelativeも忘れずに！

これで取り合えず表示される様になるので、後は好きな場所にレイアウトできる。

オプションやカスタマイズについて記載してある記事は多いですが、htmlの構造について言及しているものは少なかったので、覚え書きです。

というかこれってそもそも公式の書き方なのか…？
だったらすみません。