（Ionic 2）滑动幻灯片时保持幻灯片自动播放答案

【问题标题】：(Ionic 2) Keep auto play in slides when the slide is swiped（Ionic 2）滑动幻灯片时保持幻灯片自动播放
【发布时间】：2016-06-06 14:01:54
【问题描述】：

我有这样的滑块：

<ion-slides #promoSlider [options]="homeOptions" (change)="onPromoSlideChanged()" >
    <ion-slide *ngFor="let promo of promos">
        <img *ngIf="promo"  src="{{promo.image}}" style="width:300px;height:300px;margin:auto;display:block" >
    </ion-slide>
</ion-slides>

我已使用此选项通过自动播放来保持幻灯片播放：

  homeOptions = {
    initialSlide: 0,
    loop: true,
    autoplay:2000
  };

但问题是当我滑动滑块时，自动播放停止并且滑块不再滑动。即使我滑动滑块，如何保持滑块播放。我试过这段代码：

  onPromoSlideChanged() {
      alert('ABC');
      this.promoSlider.options = this.homeOptions;
      this.promoSlider.rapidUpdate();
      //What should i do in this method?

  };

当我滑动滑块时，我需要什么事件来保持滑块再次滑动（继续播放）？谢谢...

【问题讨论】：

标签： ionic-framework angular ionic2 swiper

【解决方案1】：

你可以在这里找到答案 => https://forum.ionicframework.com/t/how-to-keep-slides-auto-play-when-the-slides-is-swiped/54025/6

官方文档引用组件 Swiper 作为 ion-slides 组件的基础，所以 API 应该与http://idangero.us/swiper/api/11 中描述的相同。

您可以使用选项 autoplayDisableOnInteraction 来避免在用户交互后禁用自动播放。

你的选项数组应该是：
homeOptions = {
    initialSlide: 0,
    loop: true,
    autoplay:2000,
    autoplayDisableOnInteraction: false
  };
希望对你有帮助。

【讨论】：

最新的方法是将 disableoninteration 包含在自动播放中： autoplay:{disableOnInteraction: false} swiperjs.com/api/#autoplay

【解决方案2】：

$scope.images = {"status":true,"msg":"2 record(s) found","sliders":[{"title":"slider 1","content":"test
value","weblink":null,"image":"http:\/\/192.168.8.54\/test\/media\/mbimages\/a\/m\/test.jpg"},{"title":"Slider
2","content":null,"weblink":null,"image":"http:\/\/192.168.8.54\/test\/media\/mbimages\/
a\/m\/test.png"}]}

<ion-slide-box  delegate-handle="img-viewer" options="options" does-continue="true" loop="true" auto-play="true" slide-interval="5000" >

  <ion-slide ng-repeat="nt in images" ng-if="nt.slider_position == '1'" >
    <div class="box"><img ng-src="{{nt.image}}"  style="width:400px;height:200px;margin:auto;display:block"/></div>
  </ion-slide>

</ion-slide-box>


**Controller**

$scope.counter = 0;

$interval(function ()
                    {


      if($scope.counter == $ionicSlideBoxDelegate.$getByHandle('img-viewer').currentIndex() + 1)
      {



$ionicSlideBoxDelegate.$getByHandle('img-viewer').slide(0);

      }
      else{


$ionicSlideBoxDelegate.$getByHandle('img-viewer').update();

      }


             }, 2000);

angular.forEach($scope.images, function(value, key){
      if(value.slider_position == "1")
      {

      $scope.counter++;

      }

【讨论】：

这些解决方案适用于离子 1 图像滑块。如果你想要离子 2 图像滑块。我可以给你

【解决方案3】：

使用 Observable 适用于您的方案。您可以将其用作 -

import {Observable} from 'Rxjs/rx';
// in class - 
@ViewChild(Slides) slides: Slides;

ionViewDidEnter() {
  //you get slider data from any web service
  this.sliderObservable = Observable.interval(3000).subscribe(x => {
        this.autoPlaySlider();
        // or you can do this, it will start autoplay at every 3 seconds
        // this.slides.startAutoplay();
   });
}
autoPlaySlider(){
    var slider_index = this.slides.getActiveIndex();
    if(slider_index < this.sliderData.length){
        this.slides.slideTo(slider_index+1);
    }
    else{
        this.slides.slideTo(0);
    }
  }
ionViewDidLeave(){
    this.sliderObservable.unsubscribe();
}

您可以找到更多参考Here

【讨论】：