How to change ion-slide-pager (circle dots) color to white?

ionic-v1
1

So I have this slide-box:

<ion-slide>
  <div class="slide-wrapper">

    <img class="slider-img" src="../../img/icons/corazonesfera.png"/>

    <h2>SUBTITULO 1</h2>

    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
      industry's dummy text of the printing dummy text of

    </p>

  </div>
</ion-slide>

<ion-slide>
  <div class="slide-wrapper">

    <img class="slider-img" src="../../img/icons/corazonesfera.png"/>

    <h2>SUBTITULO 2</h2>

    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
      industry's    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
      industry's

    </p>

  </div>
</ion-slide>

<ion-slide>
  <div class="slide-wrapper">

    <img class="slider-img" src="../../img/icons/corazonesfera.png"/>

    <h2>SUBTITULO 3</h2>

    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
      industry's
      standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
      to make a
      type specimen book. It has survived not only five centuries, but also the leap into electronic

    </p>

  </div>
</ion-slide>

And it gives me this view (I want to change black dots to white dots):

So I tried inserting between ion-slide-box and ion-slide just like in this tutorial

<ion-slide-pager></ion-slide-pager>
    <ion-slide>
        ...
    </ion-slide>

    <ion-slide>
       ...
    </ion-slide>

But this just messes my view and adds a 4th dot/pager I have no idea where it comes from:

UPDATE + Answer

Ok finally got it working, leaving answer hope it helps someone else:

#walkthrough .slider-pager-page {
  color: white !important;
}

#walkthrough .slider-pager-page.active {
  color: $golden-color !important;
}
2

take a look in the scss:

slider-pager-page sets color to #000
so you can overwrite the color in your css/scss

1 Like
3

thanks so much that worked perfectly! but is there any way to change the inactive color?

4

look in the scss file
&.active {…}

there is the active-class, that sets the opacity to 1
By default the pager-color is a little bit transparency

set active color or opacity for the active dot and the base-class color or opacity for the others