ionic 3 图像滑块在手动滑动后停止自动播放
Posted
技术标签:
【中文标题】ionic 3 图像滑块在手动滑动后停止自动播放【英文标题】:ionic 3 image slider stops autoplay after manual sliding 【发布时间】:2018-05-20 16:58:49 【问题描述】:Ionic 3 图像滑块自动播放效果很好,但是当我手动滑动图像时,自动播放停止工作。下面是我的 ionic 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>
【问题讨论】:
最新的方法是这样配置: const slideOptsFade = speed: 1500, autoplay: delay:2000, disableOnInteraction: false, , swiperjs.com/api/#autoplay 【参考方案1】:更新:
你需要像这样使用它:
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;
注意:您需要删除html
页面上的autoplayDisableOnInteraction = "false"
。
旧答案:
您可以使用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
Swiper API
disableOnInteraction boolean true 设置为 false 并且不会自动播放 在用户交互(滑动)后被禁用,它将重新启动 每次互动后
>
【讨论】:
不错!我不知道那个属性。谢谢! :) 谢谢!请查看更新以获取更多信息 :) @sebaferreras 很高兴听到它有帮助:) 其实这个文档。作品:idangero.us/swiper/api/#autoplay【参考方案2】:如果有人找到 Ionic 4/5 的解决方案,手动滑动后重新启动滑块只需定义如下:
slideOptsOne =
initialSlide: 0,
slidesPerView: 1,
autoplay:
disableOnInteraction: false
;
HTML:
<ion-slides [options]="slideOptsOne" color="tertiary">
参考:https://swiperjs.com/api/#autoplay 干杯
【讨论】:
【参考方案3】:我使用了以下代码,它运行良好,符合预期:
// 在你的 .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();
【讨论】:
以上是关于ionic 3 图像滑块在手动滑动后停止自动播放的主要内容,如果未能解决你的问题,请参考以下文章