Navigation arrows on Slider

Ionic Framework ionic-v3
2

You need to import these first

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

Call this in your class

 @ViewChild('slides') slides: Slides;

The slides reference your ion-slides on your page html

<ion-slides #slides>
   <ion-slide>
   </ion-slide>

   <ion-slide>
   </ion-slide>

  <button type="submit" float-left ion-button  color="primary" class="btnPrev" (click)="prev()">Prev</button>
  <button type="submit" float-right ion-button color="primary" class="btnNext" (click)="next()">Next</button>
     
</ion-slides>

Add these methods

 next() {
    this.slides.slideNext();
  }

  prev() {
    this.slides.slidePrev();
  }

And there you go. Hope this helps

4 Likes