Ionic 3 - 离子幻灯片在浏览器上不起作用

Question

在 ionic 3 中，我使用的是 ion-slides；在 Android 和 iOS 应用上一切正常：我可以滑动每一行，而其他行保持不动。

在尝试使用鼠标“滑动”的浏览器上，没有任何效果；如果我滑动第一行，第二行和第三行的幻灯片也会改变位置。

这是我的模板：

<ion-card *ngFor="let channel of channels; let i = index;">
        <ion-card-header {{channel.title}}</ion-card-header>
        <ion-card-content>
            <ion-slides slidesPerView=4 spaceBetween="5">
                <ion-slide *ngFor="let video of channels[i].playlist">
                    <img src="https://.../thumbs/{{video.mediaid}}"/>
                </ion-slide>
            </ion-slides>
     </ion-card-content>
 </ion-card>

我错过了什么？

我也尝试使用下一个和上一个按钮，但我找不到传递滑动选项的方法（从 Ionic 3.0.0 中删除了幻灯片输入选项）。

我应该如何初始化滑块？

在 Swiper 中我应该设置：

{ ...,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
...
}

Answer 1

检查Slide documentation，它有你需要的一切。

例如，您可以有一个按钮来转到下一张幻灯片，如下所示：

<button ion-button (click)="goToNextSlide()">Next</button>

import { QueryList, ViewChildren } from '@angular/core';
import { Slides } from 'ionic-angular';

class MyPage {
  @ViewChildren(Slides) slides: QueryList<Slides>;

  goToNextSlide() {
    this.slides.forEach((slide) => { slide.next(); });
  }
}