ionic navigation arrows on slider code example

Example 1: ion slides next by button

import { ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';
...
@ViewChild('slides') slides: IonSlides;
next() {
	this.slides.slideNext();
}

prev() {
	this.slides.slidePrev();
}
...
// in 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>

Example 2: ionic add next button slides

import { IonSlides} from '@ionic/angular';


 export class HomePage {

      @ViewChild('mySlider')  slides: IonSlides;

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

    }
    
    
    <html>
     <ion-slides pager="true"  pager="false" #mySlider>

   <ion-slide>
   </ion-slide>

   <ion-slide>
   </ion-slide>

    <ion-button (click)="swipeNext()">Next</ion-button>

 </ion-slides>
 <html>

Tags:

Typescript Example

Recent Posts