Swiper.jsのページネーションを画像下に表示する

※ 当サイトではアフィリエイト広告を利用しています。

Swiper.jsの基本設定

公式サイト→　https://swiperjs.com/

Swiper.jsの読み込み

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

HTML

<div class="swiper-container">
  <div class="swiper-wrapper"> 
    <div class="swiper-slide"><img src="images/sample_01.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample_02.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample_03.png" alt=""></div>
  </div>

  <!--オプション-->
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-scrollbar"></div>
</div>

※オプション以下のページネーション・ナビゲーションボタン・スクロールバーは表示する場合にのみ記載します。

css

.swiper-container {
  max-width: 600px;
  margin: 30px auto;
}

環境に合わせてwidth・marginなど変更してください。

JS

<script>
  var Swiper = new Swiper('.swiper-container', {
		loop: true,
		autoplay: {
			delay: 6000,
			disableOnInteraction: true
		},
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
		},
	});
</script>

適宜仕様に合わせて変更してください。デフォルトだとページネーションは画像内下部に表示されます。

画像下にページネーションを表示させる設定

HTML

<div clss="swiper-parent">
      <div class="swiper-container">
        <div class="swiper-wrapper"> 
          <div class="swiper-slide"><img src="img/sample_01.jpg" alt=""></div>
          <div class="swiper-slide"><img src="img/sample_02.jpg" alt=""></div>
          <div class="swiper-slide"><img src="img/sample_03.jpg" alt=""></div>
        </div>        
      </div>
      <div class="swiper-pagination"></div>
    </div>

大枠（swiper-parent）で全体を囲み、swiper-paginationをswiper-containerの外に出します。

CSS

.swiper-parent{
  position:relative;
}
.swiper-pagination {
  position:absolute;
  left: 50%;
  bottom:-30px;  
  transform: translateX(-50%);
}

swiper-parent をposition:relativeにし、swiper-paginationを絶対配置にします。

これで画像外にページネーションが表示されるようになります！