CODEWITHSUNDEEP
angularionic-frameworkpaginationpagerion-slides
DMDJ
DMDJ

Reputation: 407

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

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>

Upvotes: 6

Views: 10500

Answers (3)

JarmoP
JarmoP

Reputation: 361

In ionic, I defined in global.scss:

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

Upvotes: 3

JessengBijleng
JessengBijleng

Reputation: 410

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;
 }

Upvotes: 1

Bharath
Bharath

Reputation: 85

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;

}

Upvotes: 4

Related Questions