How to change the colour of the Slider Pager Dots?

ionic-v1
1

Using the Ionic Slide Box delegate, produces Slider Pager Dots on the bottom. How can I change the color of the active and inactive ones?

I have found that you can use:

.slider-pager {
  background: #000;
}

to change the background, but this does not change the dots.

1 Like
2

try

.slider-pager 
{
 color: #000;
}
.slider-pager-page.active
{
color: #f90;
}

as you’re styling a font (svg)

If that doesnt work try

fill: #f90;

and

stroke: #9f0;

for a border around them :smile:

3

Thanks a lot, that worked for filling the active dot. Do you perhaps now how to fill the not active dots as well?
Thanks!

4 
.slider-pager-page 
{
 stroke: #9f0 !important;
}

This ^

.slider-pager-page.active
{
stroke: #f90 !important;
}

Here :smile:

1 Like
5

Thanks! But it didnt work :frowning:

6 
.slider-pager .slider-pager-page 
{
stroke: #9f0 !important;
}

Any Luck?

7

worked! thanks a lot

8

Is there a way to add a white border to each pager dots (active or not)?

This could be usefull because sometime the displayed picture can have the same color as the pager dot :frowning:

9

Seems straightforward, just apply border: 2px solid white, is that not working?

1 Like
10

It works and looks very good.

just an update, the current class for the bullets is “.swiper-pagination-bullet”

1 Like
11

For Ionic 3.4

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

5 Likes
12 
 .swiper-pagination-bullet-active{
    background: color($colors, secondary) !important;
    opacity: 1;
  }
4 Likes