Slide pagination aligned with button

Ionic Framework
1

I need to insert a slide for a tour page and align the pagination with the next and return buttons. But I’m taking a beating to do this.

I tried aligned using display inline amd the result was not ok. Now I have this result.

image

My code.

<ion-slides #slides pager="true">
    <ion-slide>
      <div class="slide">
        <img class="img-fluid" src="assets/img/tour/tour1.png" />
      </div>
    </ion-slide>

    <ion-slide>
      <div class="slide">
        <img class="img-fluid" src="assets/img/tour/tour2.png" />
      </div>
    </ion-slide> 
  </ion-slides>

  <ion-button (click)="slides.slidePrev()">
    <ion-icon name="chevron-back-outline"></ion-icon>
  </ion-button>

  <ion-button (click)="slides.slideNext()" class="float-right">
    <ion-icon name="chevron-forward-outline"></ion-icon>
  </ion-button>

When I put the ion-button inside the ion-slides the buttons not appear.

2

I found this solution here in the forum.

<ion-slides #slides pager="true">
    <ion-slide>
      <div class="slide">
        <img class="img-fluid" src="assets/img/tour/tour1.png" />
      </div>
    </ion-slide>

    <ion-slide>
      <div class="slide">
        <img class="img-fluid" src="assets/img/tour/tour2.png" />
      </div>
    </ion-slide> 
  </ion-slides>

  <ion-button fill="clear" class="swiper-button-prev swiper-button-black" (click)="slides.slidePrev()">
  </ion-button>
  <ion-button fill="clear" class="swiper-button-next swiper-button-black" (click)="slides.slideNext()">
  </ion-button>