ionic4ion-slides

ionic4 slide to next


i want to move to next slide manually but i got error. i tried like this:

<ion-slides #sliderRef pager="true" (ionSlideWillChange)="onSlideChangeStart($event)">
<ion-button (click)="slideNext()">Next</ion-button>

and in ts file:

import { Component, OnInit,  ViewChildren, ElementRef } from '@angular/core';
import { IonSlides } from '@ionic/angular';

export class AppointmentPage implements OnInit {
    @ViewChild('sliderRef', { static: true }) protected slides: ElementRef<IonSlides>;

constructor(){}

    async slideNext(): Promise<void> {
         await this.slides.nativeElement.slideNext();
    }
...
}

by calling slideNext() i have this error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'slideNext' of undefined

Solution

  • in your .ts

    moveToNext(slides){
        console.log(slides);
        slides.slideNext()
    }
    

    in your html

       <ion-slides pager="true" #theSlides>
            <ion-slide >
             <ion-button (click)="moveToNext(theSlides)">Click to go to next</ion-button>   // user click event to go to next slide    
            </ion-slide>
           <ion-slide >
             <ion-button (click)="moveToNext(theSlides)">Click to go to next</ion-button>   // user click event to go to next slide    
            </ion-slide>
         </ion-slides>