【Swiper】ページネーションや左右の矢印をスライダーの外に出す方法

RELEASE / 2024.7.21 UPDATE / 2024.07.21

Swiper

スライダー

ページネーション

外に出す

左右の矢印

Swiperは簡単にスライダーを作ることが出来る人気プラグイン。
そんなSwiperでページネーションや左右の矢印を追加した時、通常の方法で実装してもclass="swiper"要素にoverflow: hiddenが指定されている為、隠れてしまいます。
そこでこの記事ではSwiperを使ったスライダーでページネーションや左右の矢印を外に出す方法をご紹介したいと思います。

この記事の目次を表示

1 Swiperの基本形
2 ページネーションや左右の矢印をスライダーの外に出す
3 まとめ

Swiperの基本形

まず、Swiperの公式サイトにも記載されているSwiperの基本形を見てみましょう。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide -slide1"></div>
        <div class="swiper-slide -slide2"></div>
        <div class="swiper-slide -slide3"></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-pagination"></div>
</div>

そして、CSSを使ってページネーションや左右の矢印を外に出そうと調整した場合、以下のようになります。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ページネーションや左右の矢印が消えてしまいましたね。

これはclass="swiper"要素にoverflow: hiddenが指定されているのが原因です。
この指定があることで、はみ出した要素が隠されてしまいます。

ページネーションや左右の矢印をスライダーの外に出す

ページネーションや左右の矢印をスライダーの外に出すには以下のようにHTMLの構造を変更します。

<div class="swiper-container">
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide -slide1"></div>
            <div class="swiper-slide -slide2"></div>
            <div class="swiper-slide -slide3"></div>
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-pagination"></div>
</div>

class="swiper-button-prev"、class="swiper-button-next"、class="swiper-pagination"をclass="swiper"要素の外に出します。
そして、Swiper関連の要素を囲うタグを新たに作ります。

これだけでページネーションや左右の矢印をスライダーの外に出すことが出来ます。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

JavaScriptのコードによって、スライダーとページネーション、左右の矢印は紐づいているのでページネーションや左右の矢印はclass="swiper"の中に記述する必要はありません。