Swiper: Change the Color of Navigation Button

[daksamedia]

Hello there!
I have an issue, how to change the color of navigation button which set as blue one as default.
How to change it into the other one?

[nolimits4web]

They are hardcoded in CSS as inline SVG images https://github.com/nolimits4web/Swiper/blob/master/dist/css/swiper.css#L144

So you can just change colors there or replace them with your own images

[daksamedia]

thank you, this is so helpful!
Cheers!

[sirclesam]

If you just want to make them white or black you can use the built-in classes.

<div class="swiper-button-prev swiper-button-white"></div>
or
<div class="swiper-button-next swiper-button-black"></div>

[Robula]

@sirclesam The built in classes ie (swiper-button-white swiper-button-black) do not exist in either the CSS or LESS files in src.

[linconkusunoki]

Here is my solution.
I removed the background-image, then I get the SVG and put inside the arrows tag, like that:

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev,
.swiper-button-prev, 
.swiper-container-rtl .swiper-button-next{
    background-image: none;
}

<div class="swiper-button-prev">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44"><path d="M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z"></svg>
</div>

<div class="swiper-button-next">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44"><path d="M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z"></svg>
</div>

Now I can change the SVG's color

.swiper-button-next,
.swiper-button-prev, 
.swiper-container-rtl .swiper-button-prev,
.swiper-container-rtl .swiper-button-next{
    fill: #000;
}

[ZinkStudio]

Hi
I'm trying another solution using shadow piercing css rules which I find cleaner but random in a way (and depecrated in a near future ?).
I'm using angular so I use ::ng-deep

::ng-deep .swiper-button-next, ::ng-deep .swiper-button-prev {
    background-color: #2196f3; /* your background color */
    background-blend-mode: color-dodge; /* try any value possible until it suits you */
}

Or just override the background-image value

::ng-deep .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 27 44'%3E%3Cpath d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z' fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") !important;
}

::ng-deep .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 27 44'%3E%3Cpath d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z' fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") !important;
}

Just wanted to share it.

[westpole]

Could you tell me how could I specify the "white button" class?
There is nothing in API about that.

Should there be an option to specify button color class?

[cvocvo]

@westpole I just stumbled across this trying to get colors specified as well. If you build a custom version of swiper you can specify colors: http://idangero.us/swiper/api/#custom-build

I was able to use the default build and make the prev/next buttons white with this:

        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>

However, I wasn't able to get pagination switched to white/grey without some localized css overrides:

.swiper-pagination-bullet {
    opacity: .5; /*was 0.2 and was impossible to see on some background images*/
}
.swiper-pagination-bullet-active {
    background: #ffffff;
}

[minhnguyen251]

Normally you can customize the color you want directly in the data-uri, example :
For : #19BB9A -> to be replaced in ..3D'%2319BB9A'%2F..
url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%2319BB9A'%2F%3E%3C%2Fsvg%3E")

[srikat]

@westpole I just stumbled across this trying to get colors specified as well. If you build a custom version of swiper you can specify colors: http://idangero.us/swiper/api/#custom-build

I was able to use the default build and make the prev/next buttons white with this:

        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>

However, I wasn't able to get pagination switched to white/grey without some localized css overrides:

.swiper-pagination-bullet {
    opacity: .5; /*was 0.2 and was impossible to see on some background images*/
}
.swiper-pagination-bullet-active {
    background: #ffffff;
}

Had to tweak that CSS like so:

.swiper-pagination-bullet {
    opacity: 0.5;
    background-color: #ffffff;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

[111608010]

I also got similar problem, I overrides the class..
you should copy following line of code, replace with your own need
`

`

[khanhphat]

a

[Astrid-Maria]

The original question is quite old (and closed) but I have had the same problem just now and have been looking for answers. Did not find the solutions offered in this thread satisfactory so kept trying myself - and ultimately the answer is pretty simple indeed:
Open swiper.min.css
You will soon find the following code:
:root {
--swiper-theme-color: #007aff
}
If you change the color here to your desired color, the navigation bullets will change color :-)
Simple as that!

[Lexyfeer]

Hi! my solution using css was this:

// for arrows
div.swiper-button-prev,
div.swiper-button-next {
color: cyan;
}

// and for bullets
span.swiper-pagination-bullet {
background-color: black;
}