ionic 3 图像滑块在手动滑动后停止自动播放答案

【问题标题】：ionic 3 image slider stops autoplay after manual slidingionic 3 图像滑块在手动滑动后停止自动播放
【发布时间】：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

标签： angular typescript ionic2 ionic3

【解决方案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();
}

【讨论】：