ion-slides 分页项目符号与幻灯片内容重叠 [Ionic 4]

Question

我还是 Ionic 的新手，我想在我的网页中添加幻灯片。我使用了带有 pager = "true" 的 ion-slides。问题是分页项目符号与幻灯片内容重叠。我使用了检查元素来发现子弹的位置。似乎子弹被设置为位置：绝对。我不知道如何覆盖位置 CSS，因为项目符号在 shadow DOM 中。谢谢。

<ion-slides pager = "true">
   <ion-slide>
     <h1>Slide 1</h1>
   </ion-slide>
   <ion-slide>
     <h1>Slide 2</h1>
   </ion-slide>
   <ion-slide>
     <h1>Slide 3</h1>
   </ion-slide>
</ion-slides>

Answer 1

我曾经遇到过这个问题。我所做的是使用 CSS 将分页指示器固定在屏幕底部

.swiper-pagination {
   position: fixed;
   bottom: 0px;
   padding-bottom: 3px;

}