Swiperのページネーションを外に出したい。
実務でよくあるのが、下のようにページネーションがスライド画像の外側に設置されたデザインです。
See the Pen swiper_pagination_outside by たけち (@kwxteqls-the-scripter) on CodePen.
しかし、CSSだけで調整しようと思っても、ページネーションが隠れてしまって表示されません。
そこで今回は、Swiperを使ってページネーションを外に出す方法を解説します。
なお、Swiperの基本的な使い方については、下の記事で詳しく解説していますので、必要に応じて参考にしてください。
Swiperのページネーションを外に出す方法
Swiperのページネーションを外に出すには、次の3ステップで行います。
- swiperを別のdivで囲む
- ページネーションをswiperクラスの外に出す
- CSSで位置を調整する
順番に解説します。
swiperを別のdivで囲む
ページネーションを外に出すには、始めにswiper全体を別のdivで囲みましょう。
こちらのdivタグには、後でCSSを当てるので、｢swiper-container｣のようなクラス名を付けておいてください（名前は任意です）。
<!-- swiperをswiper-containerで囲む -->
<div class="swiper-container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card card1"></div>
</div>
<div class="swiper-slide">
<div class="card card2"></div>
</div>
<div class="swiper-slide">
<div class="card card3"></div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>ページネーションをswiperクラスの外に出す
次に、ページネーションをswiperクラスの外に出します。
やり方は簡単で、｢swiper-pagination｣と書かれた一行を1段下げ、swiperクラスと同階層にすればOKです。
<div class="swiper-container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card card1"></div>
</div>
<div class="swiper-slide">
<div class="card card2"></div>
</div>
<div class="swiper-slide">
<div class="card card3"></div>
</div>
</div>
</div>
<!-- ページネーションをswiperの外に出す -->
<div class="swiper-pagination"></div>
</div>これで準備が整いましたので、あとはCSSでページネーションの位置決めを行います。
CSSで位置を調整する
まずは、先ほど作成したswiperの親クラス（swiper-container）にposition: relative;を指定します。
これは、HTMLの構造を変えたことでページネーションの位置を決める｢起点｣がなくなってしまったからで、あらたにposition: relative;を指定するとswiper-containerクラスがページネーションの位置を決める｢起点｣となります。
/*親コンテナのpositionをrelativeにする*/
.swiper-container {
position: relative;
}あとは、ページネーションの位置をtopやbottom、left、rightで調整しましょう。
たとえば、下から40pxの位置に表示したければ、次のように指定すればOKです。
.swiper-pagination {
bottom: -40px !important;
}ページネーションは、swiperの外側でもちゃんと表示されます。
See the Pen swiper_pagination_outside by たけち (@kwxteqls-the-scripter) on CodePen.
