我想自动滑动离子滑块但不起作用。滑块还包含图像。数据来自API调用。
<ion-slides autoplay="5000" loop="true" speed="300" pager="true" >
<ion-slide *`ngFor`="let item of topStories">
<ion-card (click)=" this.newsService.onGoToTopStoryPage(item)">
<ion-card-content >
<ion-img [src] = "item.image"></ion-img>
<h2> <b>{{item.title}} </b></h2>
<h4>{{item.summary}}</h4>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
试试这可能适用于您的应用:
settings the options autoplay to true
slideOptsOne = {
initialSlide: 0,
slidesPerView: 1,
autoplay:true
};
page.html中
<ion-slides [options]="slideOptsOne">
<ion-slide *`ngFor`="let item of topStories">
<ion-card (click)=" this.newsService.onGoToTopStoryPage(item)">
<ion-card-content>
<ion-img [src]="item.image"></ion-img>
<h2> <b>{{item.title}} </b></h2>
<h4>{{item.summary}}</h4>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
在page.ts文件中的选项中添加配置。让我知道它的工作与否。
不要使用ion-img
。它首次显示下一张幻灯片的损坏图像。使用<img>
,如下所示。
注意:Ionic团队为ion-img
开发了ion-virtual-scroll
。
.TS
import { IonSlides } from '@ionic/angular';
slideOptions = {
initialSlide: 1,
speed: 400,
};
constructor() { }
slidesDidLoad(slides: IonSlides) {
slides.startAutoplay();
}
html的
<ion-slides [options]="slideOptions" pager="true" #slider (ionSlidesDidLoad)="slidesDidLoad(slider)">
<ion-slide *ngFor="let img of data?.images">
<img [src]="img">
</ion-slide>
</ion-slides>