Webサイトで複数の画像やコンテンツをスライダーで表示させる際によく利用されるSwiper。
軽量でカスタマイズ性が高く、さらにjQuery非依存という特長を持つ非常に優秀なJavaScriptライブラリとして、多くのサイトで採用されています。しかし、その一方でWeb制作の初学者にとっては思わぬ壁となることもあります。
例えば、SNSでよく見かけるのが次のような悩みです。
「あれっ…？ スライダーの外にページネーションを表示させたいのに、表示されない…。」
そう、ページネーションが見えない問題。
Swiperを使ったことがある人なら、一度は直面したことがあるのではないでしょうか。
経験豊富なコーダーならすぐに解決できるかもしれませんが、初学者の場合、この問題にかなりの時間を費やしてしまうこともあります（筆者も経験済み）。
この記事では、Swiperのページネーションが表示されない原因と、その解決方法を詳しく解説します。
ざっくり結論から言うと、Swiperクラスをもつdivからpaginationを外に出せばOK！
そして.swiperの親要素に対してoverflow-y:scroll;を当ててあげましょう！
INDEX
Swiperについて
SwiperのスタンダードなHTML構成
以下は、Swiper（ver7以降）の一般的な構造です。
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>（Swiper公式サイトより引用）
この構造を元に、基本的なスライダーを作成しました。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="image">
<img src="" alt="" />
</figure>
</div>
<div class="swiper-slide">
<figure class="image">
<img src="" alt="" />
</figure>
</div>
<div class="swiper-slide">
<figure class="image">
<img src="" alt="" />
</figure>
</div>
</div>
<div class="swiper-pagination"></div>
</div>.swiperにposition:relative;が当たっているので、そこを基準に.swiper-paginationの位置が決定します。
デフォルトではbottom:10px;の位置となっています。
ページネーションというと初めてスライダーを実装する人には馴染みのないワードかもしれませんが、これはスライダーの下にあるドット状のものを指します。おそらく見たことがあるはずです。
ページネーションの役割はスライダーの枚数をユーザーに視覚的に伝えたり、クリックすることで、任意のスライドに移動させたりするものです。
絶対に必要というものでもなく、デザインの関係上不要とされるケースもよくありますが、ページネーションがあるとUXの向上につながります。
ページネーションが表示されない原因
実際にページネーションが表示されない状態を再現
本題のページネーションが表示されない問題について、そのときの状況を再現してみます。
.swiper-paginationを本来の位置から50pxほど下に移動させてみます。
当然スライダーの下にページネーションを表示されていることを期待しているのですが、あるはずのページネーションが表示されません。
実は「表示されていない」のではなく「隠れている」だけ
ここで、.swiper に overflow-y: scroll; を適用し、スライダーをスクロールすると……
ページネーションが現れました！
つまり、ページネーションは表示されていたものの、スライダーの表示領域外に隠れていたわけです。
実は .swiper にはデフォルトで overflow: hidden; が適用されています。この影響で、スライダーの外側にある要素は非表示になってしまいます。
パッと思いつく解決法として.swiper の overflow プロパティを visible に変更したくなりますが、実はこうするとスライダー自体の動作に影響が出てしまいます。
そのため、別のアプローチが必要になります。
【解決法】ページネーションを .swiper の外に配置する
解決方法はシンプルです。
.swiperに親要素（.parent）を追加する。.swiper-paginationを.swiperの外に出す。.parentにposition: relative;を適用する。
以下のように、.swiper を .parent で囲み、.swiper-pagination を .swiper の兄弟要素として配置します。
<!-- .swiperを.parentで囲む -->
<div class="parent">
<div class="swiper swiper4 after-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="image">
<img src="" alt="" />
</figure>
</div>
<div class="swiper-slide">
<figure class="image">
<img src="" alt="" />
</figure>
</div>
<div class="swiper-slide">
<figure class="image">
<img src="" alt="" />
</figure>
</div>
</div>
</div>
<!-- .swiper-paginationを.swiperの外に出す -->
<div class="swiper-pagination after-swiper-pagination"></div>
</div>/* .swiper-paginationにはposition:absolute;が当たっているため、新しい基準点を用意 */
.parent {
position: relative;
}最初の方に紹介したSwiperの基本的なHTMLのコードはSwiperの公式ページから引用したものですが、そこではページネーションは.swiper内にあります。
そのせいなのか、勘違いしている初学者の方を見かけますが、実はページネーションは.swiper内になければいけないといった縛りはなく、.swiper-paginationはどこに配置しても機能します。
まとめ
Swiperのページネーションが表示されない原因は、.swiper の overflow: hidden; によるものです。
解決策として、.swiper に親要素を用意し、その外側に .swiper-pagination を配置することで、ページネーションを自由に調整できるようになります。
この方法を覚えておけば、より柔軟なスライダーの実装が可能になります。ぜひ試してみてください！
