ion-slides pager overlapping with the ion-slide content

Ionic Framework ionic-v3
1

I am creating ion-slides as follows,

<ion-slides pager="true" *ngIf="canShowPieChart">
    <ion-slide *ngFor="let pieChartObject of pieChartObjects">
      <h3 style="color:#2D5F8A"> Sample Name</h3>
      <div style="display: block">
        <canvas baseChart [data]="pieChartObject.chartData" [colors]="pieChartColors" [labels]="pieChartObject.chartLabels" [chartType]="pieChartObject.chartType" [options]="pieOptions"></canvas>
      </div>
    </ion-slide>
  </ion-slides>

But pager dots overlapping with the chart content.
35138252-b965523a-fd13-11e7-8b4a-5dc4f6b89714

2

You could try to add some padding to the bottom of the chart. The pager has an absolute position:

.swiper-pagination {
  @include text-align(center);
  @include transform(translate3d(0, 0, 0));

  position: absolute;
  z-index: 10;

  transition: 300ms;

  pointer-events: none;
}