Hatena 
swiper.js has many pagination option and we can easily create various pagination by only specify options.
In this article, I am going to describe about how to create various pagination of swiper with demo.
I’ｍ going to pursue the matter on the premise that you know how to make normal slider with Swiper.js. So if you are new to Swiper.js, firstly check the below article.
[Swiper]How to create simple responsive slider with swiper.js
Create a normal swiper slider
To make it clear, we make a normal slider which be the basis.
<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>Now a normal slider has been created.
Lets try to create various pagination by changing this code.
≪clickable:true≫ Enable click pagination button
We can not click pagination button by defaul setting.
By adding clickable option as below, we can be able to click the pagination button and the slide will move.
const swiper = new Swiper('.sample-slider', {
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true, //added
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})If you click the pagination button and the slide move,it is OK.
≪type: ‘progressbar’≫ Make pagination progressbar
We can make pagination progressbar, by adding type: ‘progressbar’ as below.
const swiper = new Swiper('.sample-slider', {
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'progressbar', //added
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})Now the pagination become progressbar.
≪progressbarOpposite: true≫ Make pagination vertical progressbar
We can make pagination vertical progressbar By adding type: ‘progressbar’ and progressbarOpposite: true as below.
const swiper = new Swiper('.sample-slider', {
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'progressbar', //added
progressbarOpposite: true, //added
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})Now the pagination become vertical progressbar.
≪type: ‘fraction’≫ Make pagination fraction
We can make pagination fraction by adding type: ‘fraction’ as below.
const swiper = new Swiper('.sample-slider', {
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'fraction', //added
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})Now the pagination become fraction.
≪renderBullet≫ Make pagination numbers
We can make pagination numbers by adding closure on renderBullet option.
Css is needed to adjust the style.
<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>Now the pagination become numbers.
≪dynamicBullets≫ Make pagination dynamic
We can make pagination dynamic By adding dynamicBullets: true as below.
The active pagination button will be larger.
const swiper = new Swiper('.sample-slider', {
loop: true,
pagination: {
el: '.swiper-pagination',
dynamicBullets: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
That is all, it was about how to create various pagination of swiper slider.
If you want to know how to replace the pagination with any images, below article might be helpful
[Swiper]How to customize pagination of Swiper slider
