如何将 ionic slider pager dots/circles 颜色从活动状态变为黄色，将非活动状态变为白色？

Question

所以我有这个幻灯片框，你可以看到寻呼机 dots/circles 出现了，我不需要包括 <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-box 和 ion-slide 之间插入 <ion-slide-pager></ion-slide-pager> 就像在 this tutorial

中一样

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

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

但这只会打乱我的观点并添加第 4 个 dot/pager 我不知道它来自哪里：

我需要的：

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

更新 + 回答

好的，感谢下面用户的输入，终于让它工作了这里是工作 Css:

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

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

Answer 1

你试过吗：

.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 2

我确定滑块寻呼机应该可以试试这个：

.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 3

在 Ionic 3 中使用这些类:

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

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

Answer 4

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

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

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

Answer 5

对于使用 Ionic 4 的用户，您需要在 ion-slides 范围内设置颜色，如下所示：

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

进一步的细节可以found in the docs

Answer 6

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

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

如何将 ionic slider pager dots/circles 颜色从活动状态变为黄色，将非活动状态变为白色？

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

css

sass

ionic-framework

ionic

ionic-view

我需要的：

更新 + 回答