所以我有这个幻灯片框,你可以看到寻呼机点/圆圈出现了,而我不需要包括 <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 之间,就像在 this tutorial 中一样
<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;
}
最佳答案
对于使用 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/