swiper ページネーションが途中で消える問題

対処法
ちなみにページネーションを外に出す方法
1. HTML
2. CSS
参考にしたサイト

対処法

原因がわからなかったので、ページネーションを外に出したりしたのですが、レスポンシブにするのが難しくて、なんどもトライアンドエラーしました。

そしてたどり着いたのが、ページネーションのコードを書く位置！

<div class="swiper-box1">
        <div id="swiper1" class="swiper-container swiper">
          <div class="swiper-wrapper">

            <div class="swiper-slide"><img src="/.png" alt=""></div>
            <div class="swiper-slide"><img src="/.png" alt=""></div>
            <div class="swiper-slide"><img src="/.png" alt=""></div>

            <!-- 前後の矢印 -->
            <div id="swiper-button-prev-none" class="swiper-button-prev"></div>
            <div id="swiper-button-next-none" class="swiper-button-next"></div>
            <!-- オプションスクロールバー -->
            <div class="swiper-scrollbar"></div>
          </div>
          <!-- ページネーション -->
          <div class="swiper-pagination swiper1"></div>
        </div>
      </div>

階層は、一番外にある枠の中で、クラス「swiper-wrapper」と同じ位置

上記だと、外にもう一個divで囲んでありますが無視してください。

ちなみにページネーションを外に出す方法

HTML

先ほど無視してくださいといった、クラス「swiper」の全体を囲むdiv

その中にページネーションを書いていきます。

この時の階層は、クラス「swiper」と一緒です。

CSS

/*親コンテナのpositionをrelativeにする*/
.swiper-box1 {
  position: relative;
}

.swiper-pagination {
  bottom: -40px;
}

「position: absolute」は、あらかじめ入れてあるswiperのファイルに入力されていたので、topやbottom、left、rightで調整します。

レスポンシブがきかなくて、デスクトップで合わせると、スマホ表示でみると下の方で表示されていたりと少し不便に感じました。

何か対処法があるのか・・・

参考にしたサイト

ありがとうございました！

Swiperのページネーションを外に出す方法

Swiperのページネーションを外に出したい。実務でよくあるのが、下のようにページネーションがスライド画像の外側に設置されたデザインです。 See the Pen swiper_pagination_outside by たけち (@kw

対処法

ちなみにページネーションを外に出す方法

HTML

CSS

参考にしたサイト

コメント