[Q&A] Swiper.jsのpagination位置の固定について

Swiper.jsのpagination位置の固定について

解決したいこと

Swiper.jsのpaginationを画面上部に固定したい。

paginationを画面上部に固定するため、cssで'.swiper-pagination'に
position:fixed;を指定すると、スワイプが効かなくなります。
原因と解決策に悩んでいます。

該当するソースコード


<head>
  <meta charset="utf-8">
  <link rel="stylesheet"
        href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
</head>

<div class="swiper">
  <div class="swiper-pagination"></div>
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
  </div>
</div>

<style>
  .swiper-slide {
　　　height: 100px;
     margin-top: 30px;
     background-color: gray;
     text-align: center;
    }
   .swiper-pagination{
     position: fixed; /*画面に固定*/
     top:0px;
    }
   .swiper-pagination-bullets {
     text-align: left;
     margin-left: 10px;
    }
   .swiper-pagination-bullet {
     width: 50px !important;
     height: 5px !important;
     background: #333 !important;
     border-radius: inherit;
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<script>
    const swiper = new Swiper('.swiper',{
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        type: 'bullets'
      },
    });
</script>

0 likes

1Answer

@prismrism posted at 2022-02-26

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%;
}

swiper-bundle.min.css に上記の指定があります。
これと自身で指定した position:fixed; top:0px; が合わさって .swiper-pagination が画面全体を覆うような状態となるため、スワイプ操作の対象となっている .swiper-slide が触れなくなっているのが原因のようです。
height が適切な大きさになるようbottom: auto で初期値に戻してやる必要があります。

そのまま .swiper-pagination に bottom を指定しても詳細度で負けてしまうので、 HTML 側で専用のクラス名を追加して対処するのが手っ取り早そうです。

<div class="swiper-pagination my-swiper-pagination"></div>

.swiper-pagination.my-swiper-pagination {
	position: fixed;
	top: 0px;
	bottom: auto;
}

0Like

Comments

@SeiNakamura
Questioner
スワイプが動くようになりました。
説明が分かりやすく、原因も理解できました。
ありがとうございます。
@prismrism
期待する動作となってよかったです！
無事解決できたのでしたら質問のクローズをお願いいたします。

Are you sure you want to delete the question?