Question

我有这样的滑块：

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

  };

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

Answer 1

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

官方文档将组件Swiper作为离子幻灯片组件的基础，因此API应与http://idangero.us/swiper/api/11中描述的API相同。

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

您的选项数组应为：
homeOptions = {
    initialSlide: 0,
    loop: true,
    autoplay:2000,
    autoplayDisableOnInteraction: false
  };
希望它有所帮助。

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

      }

Answer 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

（离子2）滑动幻灯片时，在幻灯片中保持自动播放

3 个答案: