【備忘録】swiperのページネーションを文字にカスタマイズする方法

2021年4月7日2021年4月11日

【備忘録】swiperのページネーションを文字にカスタマイズする方法

こんにちは！
今回はカルーセルスライダーが簡単に作れるJavaScriptライブラリの
Swiperのページネーションのカスタマイズについて備忘録を書いていきます。

この記事を読んでわかることは
・swiperのページネーションを文字にカスタマイズする方法

swiperの導入は知っている前提で書かせてもらうため
導入方法は省略します。

ページネーションカスタマイズ

See the Pen
swiper ページネーションカスタム by 👓ならっち👓 (@naratch_)
on CodePen.

こんな感じにページネーションをボックス1,ボックス2,ボックス3と文字にカスタマイズすることができます。

コードの解説をしていきます。

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.5.0/swiper-bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.5.0/swiper-bundle.min.js"></script>

<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><div class="box1">box1</div></div>
      <div class="swiper-slide"><div class="box2">box2</div></div>
      <div class="swiper-slide"><div class="box3">box3</div></div>
     </div>
  </div>
  <div class="swiper-pagination"></div>
</bodｙ>

ページネーションを使うには<div class=”swiper-pagination”></div>を入れることで使うことができます。(JavaScriptの記述も忘れず)

CSS

.box1 {
  background: #E13239;
  height: 50vh;
}

.box2 {
  background: #EDCB27;
  height: 50vh;
}

.box3 {
  background: #277BED;
  height: 50vh;
}

/*----------------------------
* ページネーションのスタイル
*----------------------------*/
.swiper-pagination {
    display: flex;
}

.swiper-pagination-bullet {
  border-radius:0%!important;
  width: calc(100vw/3)!important;
  height: calc(100vh/6)!important;
  line-height: calc(100vh/6);
  background:#fff!important;
}

.swiper-pagination-bullet-active {
    background:#01B9F5!important;
}

ページネーションのスタイルの下のCSSがカスタマイズに必要なクラスです。
何故か!importantを入れないと優先されなかったので入れています。

.swiper-pagination
ページネーションの親要素
今回は横並びにしました。

.swiper-pagination-bullet
ページネーションの子要素
初期状態は●ポチ

.swiper-pagination-bullet-active
ページネーションのactive要素
（今のスライドのページネーション）

swiper-pagination-bulletの初期値
width: 8px;
height: 8px;
display: inline-block;
border-radius: 50%;
background: #000;
opacity: .2;

カスタマイズ
border-radius:0%!important;
width: calc(100vw/3)!important;
height: calc(100vh/6)!important;
line-height: calc(100vh/6);
background:#fff!important;

widthやheightで大きさを変更できます。
border-radius: 0%;で四角にできます。
opacity:透明度を変更できます。
background:#fffで指定していますが:transparentで色の指定なしでも良さそうです。

今回は四角ボックスっぽくしたかったので
width: calc(100vw/3)
height: calc(100vh/6)
line-height: calc(100vh/6);
にしていますが、各自カスタマイズしてみてください。

JavaScript

var mySwiper = new Swiper('.swiper-container', {               
    paginationClickable: true,
    speed: 1000,
    mousewheel: {
    invert: false,
                },
          
    pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
    renderBullet: function(index, className) {
    //中の文字を表示
　　　return 
　　　　'<span class="' + className + '">' + 
　　　　["ボックス1", "ボックス2", "ボックス3",][index] + '</span>';　 }
               },
                });

pagination:を必ず追加してください。
追加しないとページネーションが使えません。

renderBullet: function(index, className) {

return

‘<要素 class=”‘ + className + ‘”>’ +

[“文字“, “文字“, “文字“, ][index] + ‘</要素>’;　 }

});

JavaScriptのpaginationに上記を追加すると文字が使える用になります。
変更する箇所としては赤字の箇所だけで問題ないかと思います。

要素
要素を指定できます。

文字
ここを変えることで文字を変更できます。

以上がカスタマイズする方法です。

ページネーションをカスタマイズする上で参考にしたサイト