How to slide manually to the next slide in ion-slide

Question

I am using ion-slide in ionic4 and i want to go for next slide manually by clicking on button. I have seen the ion-slide documentation in which they have mention slideNext method. But I don't know how to use this method for changing slide.

Solution 1

Ya, I got the solution. In ionic 4 you have to import IonSlides instead of Slides.

home.ts

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


 export class HomePage {

      @ViewChild('mySlider')  slides: IonSlides;

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

    }

home.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>

Solution 2

In Angular 8 :

@ViewChild('mySlider', { static: true }) slides: IonSlides;

Solution 3

Is simple and just necessary in html

<ion-slides #slides pager="true">
   <ion-slide>1
   </ion-slide>

   <ion-slide>2
   </ion-slide>
 </ion-slides>

  <ion-button (click)="slides.slidePrev()" > Prev </ion-button>
  <ion-button (click)="slides.slideNext()" > Next </ion-button>

Solution 4

Simple way (same as above answer but I tried to make it simpler):

import { Slides } from 'ionic-angular';

class abc {
  @ViewChild(Slides)slides: Slides;

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

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

View more solutions

Comments

[Alam]

Hi @Tahseen , Can you elaborate horizontal scroll inside ion-slide Ref. Url

[Sai Manoj]

Any way to slide to last side on click?