如何手动滑动到ion-slide中的下一张幻灯片

Question

我在 ionic4 中使用 ion-slide，我想通过单击按钮手动转到下一张幻灯片。我看过 ion-slide 文档，其中提到了 slideNext 方法。但是不知道怎么用这个方法换幻灯片

Answer 1

简单方法（与上述答案相同，但我试图使其更简单）：

import { Slides } from 'ionic-angular';

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

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

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

Answer 2

是的，我找到了解决方案。在 ionic 4 中，您必须导入 IonSlides 而不是 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>

Answer 3

在Angular 8 :

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

Answer 4

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

如何手动滑动到ion-slide中的下一张幻灯片

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

ionic-framework

ionic4