angular - Ionic 4 Slider autoplay
问题描述
I want to slide automatically the ionic slider but its not working. slider contains images also. data is got from API call.
<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 文件的选项中添加您的配置。让我知道它是否有效。
推荐阅读
- r - 在库函数中分配变量
- angular - Angular 6.x 元标记 OG:描述不适用于 FB
- unit-testing - Rails 升级后的神秘 rspec 错误
- javascript - 如何使用 JS 动态创建 SVG 文本元素
- python - 处理的 python 是固定在一个 CPU 上,还是可以使用多个 CPU 超时?
- python-3.x - 为 pyinstaller 使用了 pip,但 pyinstaller 仍然无法识别
- python - 使用 Python 的 AdaDelta 优化算法
- cratedb - 如何在 CrateDB SQL 查询中减去时间戳的天数?
- c++ - 用于在 2 个有符号整数区间之间进行除法的 C++ 算法
- php - 将输入字段中的数字添加到 SQL 表中的特定选项选定行