title: How do I change ionic slider pager dots/circles color when active to yellow and inactive to white?
body: <p>So I have this slide-box, as you can see the pager dots/circles appear without me needing to include <code>&lt;ion-slide-pager&gt;&lt;/ion-slide-pager&gt;</code>:</p>
  <pre><code>  &lt;ion-slide-box&gt;
  
      &lt;ion-slide&gt;
        &lt;div class=&quot;slide-wrapper&quot;&gt;
  
          &lt;img class=&quot;slider-img&quot; src=&quot;../../img/icons/corazonesfera.png&quot;/&gt;
  
          &lt;h2&gt;SUBTITULO 1&lt;/h2&gt;
  
          &lt;p&gt;
            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
  
          &lt;/p&gt;
  
        &lt;/div&gt;
      &lt;/ion-slide&gt;
  
      &lt;ion-slide&gt;
        &lt;div class=&quot;slide-wrapper&quot;&gt;
  
          &lt;img class=&quot;slider-img&quot; src=&quot;../../img/icons/corazonesfera.png&quot;/&gt;
  
          &lt;h2&gt;SUBTITULO 2&lt;/h2&gt;
  
          &lt;p&gt;
            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
  
          &lt;/p&gt;
  
        &lt;/div&gt;
      &lt;/ion-slide&gt;
  
      &lt;ion-slide&gt;
        &lt;div class=&quot;slide-wrapper&quot;&gt;
  
          &lt;img class=&quot;slider-img&quot; src=&quot;../../img/icons/corazonesfera.png&quot;/&gt;
  
          &lt;h2&gt;SUBTITULO 3&lt;/h2&gt;
  
          &lt;p&gt;
            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
  
          &lt;/p&gt;
  
        &lt;/div&gt;
      &lt;/ion-slide&gt;
  
    &lt;/ion-slide-box&gt;
  </code></pre>
  <p>And it gives me this view:</p>
  <p><a href="https://i.stack.imgur.com/dpI61.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dpI61.png" alt="enter image description here" /></a></p>
  <p>I tried inserting    <code>&lt;ion-slide-pager&gt;&lt;/ion-slide-pager&gt;</code> between ion-slide-box and ion-slide just like in <a href="http://ionicframework.com/docs/api/directive/ionSlidePager/" rel="nofollow noreferrer">this tutorial</a></p>
    
  <pre><code>&lt;ion-slide-pager&gt;&lt;/ion-slide-pager&gt;
      &lt;ion-slide&gt;
          ...
      &lt;/ion-slide&gt;
  
      &lt;ion-slide&gt;
         ...
      &lt;/ion-slide&gt;
  </code></pre>
    
  <p>But this just messes my view and adds a 4th dot/pager I have no idea where it comes from:</p>
  <p><a href="https://i.stack.imgur.com/4vFJt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4vFJt.png" alt="enter image description here" /></a></p>
  <h2>What I need:</h2>
  <p>I need to change pager dots when active to yellow and when inactive to white, just like this:</p>
  <p><a href="https://i.stack.imgur.com/ZlB09.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZlB09.png" alt="enter image description here" /></a></p>
  <h1>UPDATE + ANSWER</h1>
  <p>Ok finally got it working thanks to the input of users below here is the working Css:</p>
  <pre><code>.slider-pager-page {
    color: white !important;
  }
  
  .slider-pager-page.active {
    color: $golden-color !important;
  }
  </code></pre>