CODEWITHSUNDEEP
ionic-frameworkionic4
Tahseen Quraishi
Tahseen Quraishi

Reputation: 1553

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

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.

Upvotes: 2

Views: 15284

Answers (4)

Inês Gomes
Inês Gomes

Reputation: 4851

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>

Upvotes: 5

Khurshid Ansari
Khurshid Ansari

Reputation: 5095

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();
  }
}

Upvotes: 1

Thomas s.
Thomas s.

Reputation: 51

In Angular 8 :

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

Upvotes: 5

Tahseen Quraishi
Tahseen Quraishi

Reputation: 1553

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>

Upvotes: 19

Related Questions