[Swiper]Everything about pagination of swiper.js

swiper pagination

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’m 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.

slide_image1
slide_image2
slide_image3





≪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.

slide_image1
slide_image2
slide_image3





≪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.

slide_image1
slide_image2
slide_image3





≪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.

slide_image1
slide_image2
slide_image3





≪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.

slide_image1
slide_image2
slide_image3





≪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.

slide_image1
slide_image2
slide_image3





≪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",
    },
})
slide_image1
slide_image2
slide_image3








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

You can subscribe by SNS

Sponcerd Link

Popular Posts

*