Hatena 
swiper.jsのページネーションはとても充実しており、オプションを変更するだけで様々なページネーションを作成できます。（一部どうしてもCSSの必要あり）
当記事では様々なSwiperページネーションとその実装方法をデモ付きで紹介します。
通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swiper.jsを初めて使う方はこちらから先に参考いただければと思います。
Swiper.jsでスライダーを実装する
通常のスライダーを作成
わかりやすいように、まずは基本となるスライダーを作成します。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.swiper{
width: 70%;
}
.swiper img{
width: 100%;
}
</style>
<div class="swiper swiper_main">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
const swiper_main = new Swiper('.swiper_main', {
loop: true,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>通常のスライダーができました。これを基準に様々なページネーションを作成していきましょう。
clickable:true クリックを可能にする
Swiperのページネーションはデフォルトではクリックできないようになっています。
下記のようにclickableオプションを追加することにより、ページネーションのクリックでスライドを動かせるようになります。
const swiper = new Swiper('.sample-slider', {
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true, //追加
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})ページネーションをクリックしてスライドが動けばOKです。
type: ‘progressbar’ プログレスバーにする
下記のように type: ‘progressbar’と指定することで、ページネーションをプログレスバーにできます。
const swiper = new Swiper('.sample-slider', {
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'progressbar', //追加
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})ページネーションがプログレスバーになりました。
progressbarOpposite: true 縦方向のプログレスバーにする
type: ‘progressbar’ + progressbarOpposite: trueでページネーションを縦方向のプログレスバーにできます。
const swiper = new Swiper('.sample-slider', {
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'progressbar', //追加
progressbarOpposite: true, //追加
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})ページネーションが縦方向のプログレスバーになりました。
type: ‘fraction’ 分数表記にする
type: ‘fraction’ を追加することでページネーションを分数表記にできます。
const swiper = new Swiper('.sample-slider', {
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'fraction', //追加
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})ページネーションが分数表記になりました。
renderBullet ページネーションを数字にする
renderBulletオプションにクロージャを指定して、ページネーションを数字にします。
ここは見た目の調整にどうしてもCSSが必要になります。
<style>
.sample-slider .swiper-pagination-bullet{ /*追加*/
width: 25px; /*追加*/
height: 25px; /*追加*/
display: inline-flex; /*追加*/
align-items: center; /*追加*/
justify-content: center; /*追加*/
color: #fff; /*追加*/
} /*追加*/
</style>
<script>
const swiper = new Swiper('.sample-slider', {
loop: true,
pagination: {
el: '.swiper-pagination',
renderBullet: function (index, className) { //追加
return `<span class="${className}">${index + 1}</span>` //追加
}, //追加
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>ページネーションが数字表記になりました。
dynamicBullets ページネーションをダイナミックに
dynamicBullets: trueを追加することでページネーションをダイナミックにできます。
アクティブスライドのページネーションが大きくなります。
const swiper = new Swiper('.sample-slider', {
loop: true,
pagination: {
el: '.swiper-pagination',
dynamicBullets: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
以上、swiper.jsのオプションで実装できる様々なページネーションについての紹介でした。
ページネーションを任意の画像でカスタマイズしたい場合は下記が参考になるかと思われます。
Swiperスライダーのページネーションをカスタマイズする
コメント