css - 如何在激活时将 ionic slider 寻呼机点/圆圈颜色更改为黄色,将非事件状态更改为白色?

标签 css sass ionic-framework ionic-view

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

它给了我这样的观点:

enter image description here

我尝试插入 <ion-slide-pager></ion-slide-pager>在 ion-slide-box 和 ion-slide 之间,就像在 this tutorial 中一样

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

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

但这只会打乱我的观点并添加第 4 个点/寻呼机我不知道它来自哪里:

enter image description here

我需要什么:

我需要将寻呼机点在事件时更改为黄色,在不活动时更改为白色,就像这样:

enter image description here

更新+回答

好吧,由于下面用户的输入,终于让它工作了这里是工作的 Css:

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

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

最佳答案

对于使用 Ionic 4 的用户,您需要像这样在 ion-slides 中设置颜色:

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

更多详情可以found in the docs

关于css - 如何在激活时将 ionic slider 寻呼机点/圆圈颜色更改为黄色,将非事件状态更改为白色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32378556/

相关文章:

全高清(1920 像素)上的 CSS 媒体查询与其他媒体查询一样

node.js - gulp-sass 不再有默认的 Sass 编译器

html - 没有应用 scss 样式

angularjs - ng-map 显示两点(航路点)之间的最佳方式

html - 为什么这个 CSS 代码不能在所有设备上正常工作?

javascript - ionic 框架 : $scope is undefined in simple alert

javascript - div 高度占用剩余 View 高度

html - 如何制作三 Angular 形阴影?

jquery - 在 jquery 中全部展开/折叠

html - CSS 将表格推到页面底部