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

时间:2017-12-06 17:56:02

标签: angular typescript ionic2 ionic3

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>

3 个答案:

答案 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

Swiper API

  

disableOnInteraction boolean true设置为false,自动播放不会   在用户交互(滑动)后被禁用,它将重新启动   每次互动后

答案 1 :(得分:1)

如果有人找到 Ionic 4 的解决方案,请在手动滑动后重新启动滑块,如下所示:

lapply(NAMES[-ind], setdiff, x = NAMES[[ind]])

HTML:

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

参考:https://swiperjs.com/api/#autoplay 干杯

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