Ionic 5 slider next previous navigation button implementation

Question

While designing a next and previous button inside an 'ion-slides', these two buttons get automatically placed inside 'swiper-wrapper' class. Need to make it outside the 'swiper-wrapper' class, so that it is visible from any slide. Has any solution?

<ion-slides pager="false" #mySlider>
  <ion-slide>1</ion-slide>
  <ion-slide>2</ion-slide>
  <ion-slide>3</ion-slide>
  <ion-slide>4</ion-slide>
  <ion-button class="slide-prev-btn"><ion-icon name="chevron-back" (click)="swipeNext()"></ion-icon></ion-button>
  <ion-button class="slide-next-btn"><ion-icon name="chevron-forward" (click)="swipePrev()"></ion-icon></ion-button>
</ion-slides>

score 0 · Answer 1 · answered Feb 18 '21 at 10:02

I do this by using position and two-line code

<div style="position: absolute;top: 50%;left: 16px;font-size: 25px;z-index: 2;" (click)="slidePrev()">
    <ion-icon name="arrow-back"></ion-icon>
  </div>
  <div style="position: absolute;top: 50%;right: 16px;font-size: 25px;z-index: 2;" (click)="slideNext()">
    <ion-icon name="arrow-forward"></ion-icon>
  </div>
  <ion-slides paginationType="bullets" slidesPerView="1" 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>

TS

 @ViewChild(Slides) slides: Slides;
  slidePrev() {
    this.slides.slidePrev();
  }
  slideNext() {
    this.slides.slideNext();
  }

Ionic 5 slider next previous navigation button implementation

1 Answers1