ion-slides pagination bullet overlap the slides content [Ionic 4]

Question

I am still new to Ionic and i want to have slides in my web page. I have used ion-slides with pager = "true". The problem is the pagination bullets overlapped the slides content. I've used the inspect element to discover the position of the bullets. It appears that the bullets are set as position:absolute. I don't know how to override the position CSS as the bullets are in shadow DOM. Thanks.

<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

I ran into this problem once. What I did was to fix the pagination indicator to the bottom of the screen using CSS

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

}

Answer 2

In ionic, I defined in global.scss:

.swiper-pagination {
    position: relative;
    padding-top: 10px;
}