当活动为黄色而非活动为白色时,如何更改离子滑块寻呼机点/圆圈颜色？

Question

所以我有这个幻灯片,因为你可以看到寻呼机点/圆圈出现,我不需要包括<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>

它给了我这个观点:

我尝试<ion-slide-pager></ion-slide-pager>在离子滑动盒和离子滑动之间插入 ,就像在本教程中一样

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

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

但这只会让我的观点变得混乱,并增加了第4个点/寻呼机,我不知道它来自哪里:

我需要的:

我需要在活动时将寻呼机点更改为黄色,将非活动时更改为白色,如下所示:

更新+答案

好的,最后得到它的工作,感谢这里的用户输入是工作Css:

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

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

Answer 1

对于使用 Ionic 4 的用户，您需要ion-slides像这样设置颜色：

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

可以在文档中找到更多详细信息

Answer 2

在Ionic 3中使用以下类:

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

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

Answer 3

我确定滑块寻呼机应该工作试试这个:

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

我包含一些背景颜色,以便您更容易识别.