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;
}

I want to create same intro app on Ionic framework, with two buttons at bottom.... Please share your tutorial link or gitub link or any link... where I can get demo code... Thanks — Sophie, Oct 27 '16 at 05:26
Like @Sophie, may be you can make a tutorial for us and the community. I want to make a intro like that. Thanks! — Faustino Gagneten, Jan 02 '17 at 21:39

score 14 · Answer 1 · answered Jan 14 '19 at 15:59

14

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

answered Jan 14 '19 at 15:59

Cortney Thomas

299
2
9

I tried this on the `global.scss` file but did not work. I don't understand why. I needed to do it on the `page.scss` file. – RaulGM Sep 11 '19 at 10:21

score 11 · Answer 2 · answered Jun 21 '17 at 16:45

11

In Ionic 3 use these classes:

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

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

answered Jun 21 '17 at 16:45

Andrei Drynov

8,362
6
39
39

score 9 · Accepted Answer · answered Sep 03 '15 at 14:55

9

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.

answered Sep 03 '15 at 14:55

Jeka

1,600
3
22
36

thanks that worked but the inactive dot still same color (blackish) – CommonSenseCode Sep 03 '15 at 14:57
how to give border color for each bullet? @Jeka – Sudarshan Kalebere Aug 30 '16 at 06:42

score 1 · Answer 4 · answered Sep 03 '15 at 14:40

1

have you tried with:

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

This seemed to work for people in here http://forum.ionicframework.com/t/how-to-change-the-colour-of-the-slider-pager-dots/18461/6

Maybe that might help you.

answered Sep 03 '15 at 14:40

Yeah I had already checked that link but it's doing nothing for my case since when I try to use it messes my html as you can see in original post, thanks anyways! – CommonSenseCode Sep 03 '15 at 14:42

score 0 · Answer 5 · answered Nov 24 '18 at 08:07

Ionic provides CSS classes which we can override to apply the colors. I have taken pagination type to be bullets(which ionic has made default). You can apply the same technique to others .

//Inactive bullet
.swiper-pagination-bullet {
    color: grey;
   }  

//active bullet
.swiper-pagination-bullet-active {
    color: red;
   }

score 0 · Answer 6 · answered Mar 16 '21 at 08:47

0

For ionic-5, Please put the code in variables.scss

ion-slides {
  .swiper-slide, .swiper-pagination {
     --bullet-background: #ED1C24;
     --bullet-background-active: #662D91;
   }
}

answered Mar 16 '21 at 08:47

Suryakant kumar

100
1
6

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

What I need:

UPDATE + ANSWER

6 Answers6