How do I change ionic slider pager dots/circles color when active to yellow and inactive to white?

Question

So I have this slide-box, as you can see the pager dots/circles appear without me needing to include <ion-slide-pager></ion-slide-pager>:

  <ion-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>

  </ion-slide-box>

And it gives me this view:

I tried inserting <ion-slide-pager></ion-slide-pager> 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:

What I need:

I need to change pager dots when active to yellow and when inactive to white, just like this:

UPDATE + ANSWER

Ok finally got it working thanks to the input of users below here is the working Css:

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

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

Solution 1

I'm sure slider pager should work try this:

.slider-pager-page
{
  color: white;
  fill: #f90;
  stroke: red;
  background-color: blue;
}
.slider-pager-page.active
{
  fill: #f90;
  stroke: red;
  color: blue;
  background-color: red;
}

i'm including some background color so you can identify more easily.

Solution 2

For those using Ionic 4, you'll need to set the color within ion-slides like so:

ion-slides {
   --bullet-background: white;
   --bullet-background-active: yellow;
}

Further details can be found in the docs

Solution 3

In Ionic 3 use these classes:

.swiper-pagination-bullet {
    background: white;
    opacity: 0.5;
  }

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