Question

请检查下面的代码，我想翻转我的幻灯片，但这不会得到应用。我是Ionic的新手，并努力让它解决，但没有效果得到应用。

<ion-slides pager #mainslider [effect]=flip>
    <ion-slide>
      <h1>Slide 1</h1>
    </ion-slide>
    <ion-slide>
      <h1>Slide 2</h1>
    </ion-slide>
    <ion-slide>
      <h1>Slide 3</h1>
    </ion-slide>
    <button type="submit"  ion-button color="primary" class="btnNext" (click)="next()">Next holiday</button>
    <button type="submit"  ion-button color="primary" class="btnNext" (click)="prev()">Next holiday</button>
  </ion-slides>



next() {
    this.slides.slideNext();
  }
 prev() {
    this.slides.slidePrev();
  }
  ionViewWillEnter() {
    this.slides.onlyExternal = true; 
     this.slides.effect = 'flip'; 
    this.slides.paginationType = 'fraction'; 
    this.slides.pager = false; 
 }

Answer 1

你应该使用像effect="flip"

这样的效果属性

<ion-slides pager #mainslider effect="flip">
    <ion-slide style="background-color: aquamarine">
      <h1>Slide 1</h1>
    </ion-slide>
    <ion-slide style="background-color:lightblue;">
      <h1>Slide 2</h1>
    </ion-slide>
    <ion-slide style="background-color:darkcyan;">
      <h1>Slide 3</h1>
    </ion-slide>
  </ion-slides>

Ionic3滑块翻转效果不起作用

1 个答案: