7

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:

enter image description here

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:

enter image description here

What I need:

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

enter image description here

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;
}
Community
  • 1
  • 1
CommonSenseCode
  • 23,522
  • 33
  • 131
  • 186
  • 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

6 Answers6

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

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
11

In Ionic 3 use these classes:

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

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

enter image description here

Andrei Drynov
  • 8,362
  • 6
  • 39
  • 39
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.

Jeka
  • 1,600
  • 3
  • 22
  • 36
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.

  • 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
0

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

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

ion-slides {
  .swiper-slide, .swiper-pagination {
     --bullet-background: #ED1C24;
     --bullet-background-active: #662D91;
   }
}
Suryakant kumar
  • 100
  • 1
  • 6