[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 a simple 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




If you want to place the progress bar at the very bottom, you can achieve this by adding the following CSS as shown below.

.sample-slider .swiper-pagination{
    top:initial;
    bottom:0;
}
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{   /*added*/
        width: 25px;                            /*added*/
        height: 25px;                           /*added*/
        display: inline-flex;                   /*added*/
        align-items: center;                    /*added*/
        justify-content: center;                /*added*/
        color: #fff;                            /*added*/
    }                                           /*added*/
</style>


<script>
    const swiper = new Swiper('.sample-slider', {
        loop: true,                         
        pagination: {                       
            el: '.swiper-pagination',
            renderBullet: function (index, className) {                 //added
                return `<span class="${className}">${index + 1}</span>` //added
            },                                                          //added
        },
        navigation: {                       
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

Now the pagination become numbers.

slide_image1
slide_image2
slide_image3





≪dynamicBullets:true≫ 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





≪hideOnClick:true≫ Enable to toggle the visibility of pagination

We can enable to toggle the visibility of pagination By adding hideOnClick: true as below.

const swiper = new Swiper('.sample-slider', {
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        hideOnClick: true,          // added
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})


If you click the slide, the pagination will be hidden. If you click the pagination again, the pagination will be shown.








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

Sponsored Link

You can subscribe by SNS

Sponcerd Link

Comments

  1. Sam says:

    How do you move the progress bar below the slider?

    1. sada says:

      Thanks for your comment, Sam!

       

      If you want to place the progress bar at the bottom-most, you can achieve this by adding the following CSS.

      .sample-slider .swiper-pagination{
          top:initial;
          bottom:0;
      }
      

       
       

      If you want to place the progress bar below the slider, you can achieve this by adding the following CSS.

      .sample-slider{
          padding-bottom: 10px;
      }
      .sample-slider .swiper-pagination{
          top:initial;
          bottom:0;
      }
      

Leave a Reply

*