【Swiperカスタマイズ】ページネーションの見た目を中黒ではなく、横長長方形にする方法

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

Swiper.jsでページネーションを中黒（・）ではなくて、横長長方形の見た目にカスタマイズしたい
コピペでOKなSwiper.jsのサンプルコードを探している

という方のお悩みを解決します！

今回、紹介するサンプルコードはぼくがかつて、実際のWebサイト制作案件で使用したものです。

同じ様な機能のSwiperカスタマイズのコーディングで躓いている方の助けになれれば幸いです！

特徴と完成イメージ
スライドショーのサンプルコード
まとめ

特徴と完成イメージ

今回紹介するコードで実現できるスライドショーのデザインはこちら！

▼▼▼

1度は目にしたことがあるデザインではないでしょうか。

以下が特徴です。

1枚目のスライドは中央配置
スライド間の余白をあける
3枚のスライドが表示されている
スライド下にページネーションを長方形の見た目で表示している
ページネーションをクリックすると該当のスライドまで移動する

以下で紹介するコードをお使いいただければ、とりあえず見た目だけは秒で再現できます！

それでは見ていきましょう〜〜

＊Swiper.jsを導入していることを前提とした記事となります

スライドショーのサンプルコード

こちら、CodePenで作った見本です！

この画面だと本来のPCサイズで表示されないので、ぜひCodePenのページへ行って確かめてみていただきたいです。

See the Pen Swiperページネーションカスタマイズ② by 石森裕也 (@yuyaphotograph) on CodePen.

HTML

こちら、スライドショーのHTML構造です！

スライドの数を増やしたい場合は、「swiper-slide」の塊を増やしてあげればOK！

肝は、「swiper-slide」の中にテキスト表示用のdivを作ることです！

HTML

<div class="Inner">
  <div class="swiper-container Inner-Card">
    <div class="swiper-wrapper Inner-Card-Wrapper">
      <div class="swiper-slide Inner-Card-Wrapper-Slide">
        <div class="Inner-Card-Wrapper-Slide-Item">
          <div class="Inner-Card-Wrapper-Slide-Item-Box">
            <p class="Inner-Card-Wrapper-Slide-Item-Box-Title">タイトル</p>
            <p class="Inner-Card-Wrapper-Slide-Item-Box-Text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
      </div>
      <div class="swiper-slide Inner-Card-Wrapper-Slide">
        <div class="Inner-Card-Wrapper-Slide-Item">
          <div class="Inner-Card-Wrapper-Slide-Item-Box">
            <p class="Inner-Card-Wrapper-Slide-Item-Box-Title">タイトル</p>
            <p class="Inner-Card-Wrapper-Slide-Item-Box-Text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
      </div>
      <div class="swiper-slide Inner-Card-Wrapper-Slide">
        <div class="Inner-Card-Wrapper-Slide-Item">
          <div class="Inner-Card-Wrapper-Slide-Item-Box">
            <p class="Inner-Card-Wrapper-Slide-Item-Box-Title">タイトル</p>
            <p class="Inner-Card-Wrapper-Slide-Item-Box-Text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>

CSS

こちらスライドショーのスタイリングです！

ページネーションのデザイン変更は、「.swiper-pagination-bullet」と「.swiper-pagination-bullet-active」に対して行います。

横幅や高さはよしなに調整してご利用くださいまし。

CSS

.Inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.Inner-Card {
  padding-top: 80px;
  padding-bottom: 80px;
  width: 100%;
  background: #fff;
}
.Inner-Card-Wrapper {
  display: flex;
}
.Inner-Card-Wrapper-Slide {
  width: 54% !important;
  padding: 40px 60px;
  background: skyblue;
}
.Inner-Card-Wrapper-Slide-Item {
  width: 100%;
}
.Inner-Card-Wrapper-Slide-Item-Box-Title {
  color: #fff;
  font-size: 18px;
}
.Inner-Card-Wrapper-Slide-Item-Box-Text {
  margin-top: 24px;
  line-height: 1.8;
  color: #fff;
  font-size: 16px;
}
.swiper-pagination-bullet {
  border-radius: inherit;
  margin: 0 5px!important;
  width: 54px;
  height: 5px;
  background: skyblue;
  opacity: 0.19;
}
.swiper-pagination-bullet-active {
  background: skyblue;
  opacity: 1;
}

もし、ページネーションの表示位置を右端に寄せたい場合は、各ページャーの親要素である「.swiper-pagination-bullets」に対して、最大幅などを指定してあげることで対応します。

CSS

.swiper-pagination-bullets{
  left: 50%!important;
  transform: translateX(-50%);
  max-width: 1080px
  text-align: right!important;
}

Swiperのページネーションは、absoluteの要素なので、上記のようにleft50%とtransform〜を指定することで中央寄せするのがいいでしょう。

Swiperの設定（JS）

Swiperの設定です。

ページネーションは「pagination」を設定すると表示されるようになります。

spaceBetweenでスライド間の余白を指定します。（下記のコードの場合は60px）

スライドを自動再生させたい場合は、コメントアウトされているautoplay部分をコメントインしてください。

sample.js

$(function(){

  var swiper = new Swiper('.swiper-container', {
    loop: true,
    slidesPerView: 'auto',
    centeredSlides: true,
    spaceBetween: 60,
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true,
    },
    // autoplay: {
    //   delay: 2000,
    // }
  });

});

まとめ

以上、実践的なSwiper.jsのカスタマイズ方法を紹介しました。

最後にもう一度特徴をおさらいしましょう。

1枚目のスライドは中央配置
スライド間の余白をあける
3枚のスライドが表示されている
スライド下に中黒（・）ではなく、横長長方形の見た目でページネーションが表示されている

コーポレートサイトの制作案件をする際など必ずや！役立つスキルとなりますのでぜひ覚えていきましょう〜！

Swiper.jsカスタマイズに役立つ記事まとめ

コーディングスキルアップシリーズはこちら！