[Swiper]How to change size, position and color of pagination

When we create swiper slider, sometimes want to change size, position or color of pagination.
I will show how to do it with the demos.



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 a simple slider with swiper.js

Create a normal swiper slider

To make it clear, we will create a normal swiper slider first and then make changes.

<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>
    .sample-slider{
        width:70%;
    }
    .sample-slider img{
        width: 100%;
    }
</style>

<div class="swiper sample-slider">
    <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 = new Swiper('.sample-slider', {
        loop: true,                         //loop
        autoplay: {                         //autoplay
            delay: 2000,  
        },   
        pagination: {                       //pagination(dots)
            el: '.swiper-pagination',
        },
        navigation: {                       //navigation(arrows)
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

Now we can see a normal swiper slider.

How to change the pagination size

We can specify the pagination size by swiper-pagination-bullet class.
Default size is 8px. So if you specify it 20px as below, pagination size will be bigger.

.sample-slider .swiper-pagination-bullet{
    width: 20px;
    height: 20px;
}

Pagination size has been changed.

How to change the paginaion space

We can change the pagination space by swiper-pagination-bullet class as same as pagination size.
Default space is 4px. So if you specify it 15px as below, pagination space will be bigger.

.sample-slider .swiper-pagination-bullet{
    width: 20px;
    height: 20px;
    margin: 0 15px!important;     /* added */
}

Pagination space has been changed.

How to change the paginaion position

We can change the pagination position by swiper-pagination-bullets class.
The modification method depends on ‘where we want to put the pagination‘, so I will describe one by one.

Move the pagination up a bit

We can move the pagination up by specifying bottom property.
Default is 10px. So if you specify it 30px as below, pagination will move up a bit.

.sample-slider .swiper-pagination-bullets{
    bottom: 30px;
}

Move the pagination on the top

We can move the pagination on the top by initializing bottom property and specifying the top property 10px etc.

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

Move the pagination down a bit

We can move the pagination down by spwcifing bottom property.
Default is 10px. So if you specify it -15px as below, pagination will move down a bit.

.sample-slider .swiper-pagination-bullets{
    bottom: -15px;
}

Move the pagination below the frame

By changing bottom property, we can not move the pagination below the frame.
We can do that by writing as below.

.sample-slider{
    --add-bottom: 50px;
    padding-bottom: var(--add-bottom);
}
.sample-slider [class^="swiper-button-"]{
    top: calc(50% - var(--add-bottom) / 2);
}

Move the pagination on the left

We can move the pagination on the left by initializing width property of swiper-pagination-bullets class.

.sample-slider .swiper-pagination-bullets{
    width: initial;
}

Move the pagination on the right

We can move the pagination on the right by initializing width property and left property, and specifying the right property 0.

.sample-slider .swiper-pagination-bullets{
    width: initial;
    left: initial;
    right: 0;
}

How to change the paginaion color

We can change the pagination color by specifying background-color property at swiper-pagination-bullet class.

.sample-slider .swiper-pagination-bullet{
    background-color: yellow;
}

That is all, it was how to change size, position and color of pagination.




If you want to change the size, position, or color of the arrows, you may find the following article helpful.
[Swiper]How to change size, position and color of arrows

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