1

I have ion-slides component showing some slides. The content of each slide renders dynamically based on a service.

Often, the bottom slider dots overlaps the text. What is the way to make sure they are always with some gap?

 <div style="padding:15px; padding-top:30px;background-color: #232536">
  <ion-slides pager="true">
    <ion-slide *ngFor="let gal of core.gallery">
      <div>
        <img *ngIf="gal.type=='image'" src="{{gal.link}}">
        <iframe *ngIf="gal.type == 'video'" style="width: 100%" [src]="getVideoUrl(gal.link)" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <ion-row>
          <ion-col text-left><h2 style="color:white" >My Title</h2>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col style="color:#A2A0B2" text-left>{{gal.desc}}</ion-col>
        </ion-row>
      </div>
    </ion-slide>
  </ion-slides>

Moblize IT
  • 1,140
  • 2
  • 18
  • 44

1 Answers1

2

Add a <br/> tag at end of the slide content and to position the dots from bottom, add the following CSS in global.css file 

.swiper-pagination {
    bottom: 3px !important;    
}
Anusha Busetty
  • 81
  • 1
  • 4