【CSSのみ】Swiperスライダーのページネーションを縦並びにする方法【pagination】

【CSSのみ】Swiperスライダーのページネーションを縦並びにする方法【pagination】 JavaScript
2023.03.02
スポンサーリンク

Swiperのスライド方向は横のまま、ページネーションだけを縦並びにしたい場合は、JavaScriptのdirectionオプションではなくCSSで配置を変えます。

この記事では、ページネーションをPCでは縦、スマートフォンでは横に切り替える実装を紹介します。bulletの幅を利用して折り返す方法より、Flexboxのflex-directionを使う方が、bulletの数やサイズが変わっても安定します。

本記事の執筆者：マサトラ

フリーランス歴4年のWebエンジニア。現在は20社以上のWeb制作会社社様と提携し、WordPress構築やLP制作を中心に月3～5件のペースでサイト制作を手がけています。
このブログでは、実務で得た知識やノウハウ、制作現場での気づきを、フリーランスとして活動中の方はもちろん、これからWeb制作を仕事にしたいと考えている方にも役立つよう発信しています。

スポンサーリンク

完成イメージ

Swiperのページネーションを横に並べた状態
Swiperのページネーションを縦に並べた状態

HTML

基本構造は通常のSwiperと同じです。複数のスライダーを置いてもCSSが干渉しにくいよう、外側をsample-slider-wrapperで囲みます。

<div class="sample-slider-wrapper">
  <div class="sample-slider swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>
スポンサーリンク

CSSでページネーションだけを縦並びにする

.sample-slider-wrapper {
  position: relative;
}

/* PC：ページネーションをスライダー右側の中央へ縦配置 */
.sample-slider-wrapper .swiper-pagination {
  top: 50%;
  right: 16px;
  bottom: auto;
  left: auto;
  width: auto;
  transform: translateY(-50%);
}

.sample-slider-wrapper .swiper-pagination-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sample-slider-wrapper .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0;
}

/* スマートフォン：下部へ移動して横配置 */
@media (max-width: 767px) {
  .sample-slider-wrapper .swiper-pagination {
    top: auto;
    right: auto;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
  }

  .sample-slider-wrapper .swiper-pagination-bullets {
    flex-direction: row;
  }
}

ポイントは、bulletを包む.swiper-pagination-bulletsにdisplay: flexとflex-direction: columnを指定することです。画面幅が767px以下になったらrowへ戻します。

rightやbottom、bulletの大きさと間隔は、実際のデザインに合わせて調整してください。Swiper標準CSSより後にこのCSSを読み込ませます。

JavaScript

const swiper = new Swiper('.sample-slider', {
  loop: true,
  pagination: {
    el: '.sample-slider .swiper-pagination',
    clickable: true,
  },
});

direction: 'vertical'は指定しません。このオプションはページネーションだけでなく、スライド本体の移動方向も縦にするためです。

まとめ

  • ページネーションの縦並びにはflex-direction: columnを使う
  • レスポンシブではrowへ切り替える
  • セレクターをスライダーごとにスコープして、ほかのSwiperへの干渉を防ぐ
スポンサーリンク