离子3图像滑块在手动滑动后停止自动播放

Question

离子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>

Answer 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>

请参阅其在Ionic

上的实施方式

Swiper API

disableOninteraction boolean true设置为false和自动播放不会 在用户交互后被禁用（刷新），将重新启动 互动后的每一次

Answer 2

如果有人找到了离子4/5 的解决方案，请在手动滑动后重新启动滑块：

slideOptsOne = {
    initialSlide: 0,
    slidesPerView: 1,
    autoplay: {
      disableOnInteraction: false
    }
  };

html：

<ion-slides [options]="slideOptsOne" color="tertiary">

参考：https：//swiperjs.com/api/#autoplay欢呼

Answer 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();
}