离子滑动分页子弹重叠幻灯片内容[离子4]

Question

我还是Ionic的新手，我希望在我的网页上有幻灯片。我使用了pager =“true”的离子幻灯片。问题是分页子弹与幻灯片内容重叠。我已经使用了inspect元素来发现子弹的位置。子弹似乎设置为位置：绝对。我不知道如何覆盖CSS的位置，因为子弹在阴影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;

}

Answer 2

variables.scss

   .swiper-pagination {
      bottom: 0px !important;
    }

你需要！重要的是忽略以前的样式或使用id +类来覆盖样式的良好实践qazxsw poi