Search code examples
ionic-frameworkionic4

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.


Solution

  • 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>