css - 如何将离子滑块寻呼机点/圆圈颜色更改为黄色，非活动为白色？

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-box 和 ion-slide 之间插入，就像在本教程中一样

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

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

但这只是扰乱了我的观点并添加了第四个点/寻呼机，我不知道它来自哪里：

我需要的：

我需要在活动时将寻呼机点更改为黄色，在不活动时更改为白色，就像这样：

更新+答案

好的，由于下面用户的输入，终于让它工作了，这里是工作的 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;
}

我包括一些背景颜色，以便您更容易识别。

Answer 4

您是否尝试过：

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

这似乎对这里的人有用 http://forum.ionicframework.com/t/how-to-change-the-colour-of-the-slider-pager-dots/18461/6

也许这可能会帮助你。

Answer 5

Ionic 提供了 CSS 类，我们可以覆盖这些类来应用颜色。我已将分页类型设为项目符号（离子已默认）。您可以将相同的技术应用到其他人身上。

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

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

Answer 6

对于 ionic-5，请将代码放入 variables.scss

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