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

Posted 2023-03-06

【中文标题】如何将离子滑块寻呼机点/圆圈颜色更改为黄色，非活动为白色？

【英文标题】：How do I change ionic slider pager dots/circles color when active to yellow and inactive to white?

【发布时间】：2015-11-29 11:04:03

【问题描述】：

所以我有这个滑动框，你可以看到寻呼机点/圆圈出现，而我不需要包含<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>

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

我需要什么：

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

更新 + 答案

好的，感谢用户的输入，它终于可以工作了，下面是工作的 Css：

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


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

【问题讨论】：

我想在 Ionic 框架上创建相同的介绍应用程序，底部有两个按钮.. 请分享您的教程链接或 gitub 链接或任何链接...在那里我可以获得演示代码.. . 谢谢

像@Sophie 一样，也许您可​​以为我们和社区制作教程。我想做一个这样的介绍。谢谢！

【参考方案1】：

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

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

更多详情可以found in the docs

【讨论】：

我在global.scss 文件上试过这个，但没有奏效。我不明白为什么。我需要在 page.scss 文件上执行此操作。

【参考方案2】：

在 Ionic 3 中使用这些类：

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

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

【参考方案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;

我添加了一些背景颜色，以便您更容易识别。

【讨论】：

感谢工作，但不活动的点仍然是相同的颜色（黑色）

如何为每个项目符号赋予边框颜色？ @Jeka

【参考方案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

也许这对你有帮助。

【讨论】：

是的，我已经检查过该链接，但它对我的情况没有任何帮助，因为当我尝试使用 时，它会尽可能地弄乱我的 html见原帖，谢谢！

【参考方案5】：

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

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

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

【参考方案6】：

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

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