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>

Overwrite

mind adding your slider code ? – Falchion

@IraW I have edit and add the code – Overwrite

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;

}

Scission

Are you overriding styles in the component CSS file? – Scission

not working because its may be ion-sildes components problem – Perlite

This worked when I put it in global.scss but it does not work when I put it in component's .scss. Any suggestions on how to make the component's style override the ion-slides style? – Advocation

Another quick/nasty workaround is pad the slide with the longest content e.g. <p>&nbsp;</p> – Connivent

Any idea how I can fix it to the bottom of the div, instead of bottom of the page? – Mendes

Answer 2

In ionic, I defined in global.scss:

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

Burrus

Answer 3

Add a custom class name to your <IonSlides>. For example (In Ionic React): <IonSlides className="my-custom-slider">

Then what i did was add a padding-top and padding-bottom in my custom css file.

.my-custom-slider {
     padding-top: 10px;
     padding-bottom: 10px;
 }

After that change the position of the .swiper-navigation in your <IonSlides>

.my-custom-slider .swiper-pagination {
     bottom: 0px;
 }

Now they no longer overlap :). I only ecountered this issue on Android though, so I also added the selector .md to my custom class, making the above example look like this:

.my-custom-slider.md { 
     padding-top: 10px;
     padding-bottom: 10px;
 }

Val