Ionic 3图像滑块自动播放效果很好,但是当我手动滑动图像时,自动播放停止工作。下面是我的离子3代码。我真的被困在这里..
slideData = [{ image: "../../assets/img1.jpg" },{ image: "../../assets/img2.jpg" },{ image: "../../assets/img3.jpg" }]
html代码如下
<ion-slides class="slide-css" autoplay="100" loop="true" speed="100" pager="true" autoplayDisableOnInteraction = "false">
<ion-slide *ngFor="let slide of slideData">
<img src="{{slide.image}}" />
</ion-slide>
</ion-slides>
答案 0 :(得分:14)
<强> 更新 强>
您需要像这样使用它:
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';
@ViewChild(Slides) slides: Slides;
constructor(private navCtrl: NavController, private navParams: NavParams) {
}
ionViewDidEnter() {
this.slides.autoplayDisableOnInteraction = false;
}
注意: 您需要删除autoplayDisableOnInteraction = "false"
页上的html
。
旧答案:
您可以使用autoplayDisableOnInteraction = "false"
,如下所示。
<ion-slides class="slide-css" autoplay="100" loop="true" speed="100"
pager="true" autoplayDisableOnInteraction = "false">
</ion-slides>
See how it implements on Ionic
disableOnInteraction boolean true设置为false,自动播放不会 在用户交互(滑动)后被禁用,它将重新启动 每次互动后
答案 1 :(得分:1)
如果有人找到 Ionic 4 的解决方案,请在手动滑动后重新启动滑块,如下所示:
lapply(NAMES[-ind], setdiff, x = NAMES[[ind]])
HTML:
slideOptsOne = {
initialSlide: 0,
slidesPerView: 1,
autoplay: {
disableOnInteraction: false
}
};
答案 2 :(得分:0)
我使用了以下代码,并且可以正常运行,并且符合预期:
//在您的.ts文件中
slideOptsOne = {
initialSlide: 0,
slidesPerView: 1,
autoplay: {
delay: 3000,
disableOnInteraction: false
}
};
在您的HTML中-
<ion-slides pager="false" [options]="slideOptsOne">
注意:
我甚至没有引用我的.ts
文件中的滑块,并在slidesDidLoad
事件上调用自动播放,如下所示:
slidesDidLoad(slides: IonSlides) {
slides.startAutoplay();
}