ion-slides options (like autoplay) not working anymore?

[jgw96]

From @1BJK903 on December 24, 2016 12:39

Ionic problems with ion-slides. I haven't changed anything at all, just updated. The autoplay was working before updating. When I remove all the options, the slides just says the same as with the options. So it looks like he is not reading / getting the options. What might be the problem here? I don't see any errors in the console btw.

Cordova CLI: 6.4.0 
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: macOS Sierra
Node Version: v6.8.1
Xcode version: Xcode 8.2.1 Build version 8C1002
Ionic version: "1.3.1-nightly-4219"

Is this a known issue? I am using

<ion-slides options="options" slider="slider">
....
...
<ion-slide-page>
...
</ion-slide-page>
</ion-slides>

And:

  $scope.options = {
    autoplay: 2500,
    loop: false,
    speed: 1000,
    slidesPerView: 1,
    centeredSlides: true
  }

Copied from original issue: ionic-team/ionic-framework#9783

[jgw96]

From @djcprinse on January 12, 2017 15:11

I have kind of the same issue. However I am not using autoplay but initialSlide. Before updating initialSlide worked perfectly, however now I it not working anymore... I am using ngRepeat at the <ion-slide-page>

Cordova CLI: 6.4.0 
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.9.2
Xcode version: Xcode 8.2.1 Build version 8C1002
Ionic version: "1.3.2"

HTML:

<ion-slides options="self.sliderOptions" slider="data.slider">
   <ion-slide-page ng-repeat="month in c.months">
      ......
   </ion-slide-page>
</ion-slides>

JavaScript

function getMonth() {
   var date = new Date()
   return date.getMonth()
}

self.sliderOptions = {
   runCallbacksOnInit: false,
   pagination: false,
   initialSlide: getMonth()
};

This code was working perfectly before update, however now it is not working anymore... I even tried to set initialSlide: 2 to a static value however this did not work either. Even creating 12 <ion-slide-page> manual did not work. At last I tried to set the options in <ion-slides options="{runCallbacksOnInit: false, pagination: false, initialSlide: 2}" slider="data.slider">. None of these things worked, so the only reason I can think about is that the update broke the functionality.

[1BJK903]

Thanks, but will someone solve this issue? 3 months later and we still have not solution! I can't go live like this @jgw96. The problem is caused by an Ionic update and we can't fix it, while it was working before!

Could you guys check this please? I have no clue whether Ionic is trying to solve this at all, now...

[pedy711]

This issue is still there and I can't use any options with ionic2 slides.

+1 for a fix

[christlibon]

I have the same problem... Any news on a fix ?

Same problem here, hopefully someone will find a solution and share it with us.

[chris08002]

I have two sliders linked to a FirebaseListObservable with *ngFor async. In some situation initialSlide actually works, in others it doesn't. It looks like it only works when the ListObservable has finished loading. I guess I have to remove the async from the *ngFor and subscribe to the ListObservable and then write the result to an array and apply *ngIf="result.length > 0" to ion-slides.

Kind of taking away all the beauty of AngularFire2 and ion-sliedes :-/

[1BJK903]

Still nothing here @mhartington @jgw96? It's incredible... the updated caused an error and there is no fix... we still can't go live like this and yet there is no help WHATSOEVER.

[RaymondAtivie]

All those still stuck with the problem, i finally got a fix, through this stackoverflow question: https://stackoverflow.com/questions/44941289/ionic-3-slide-not-working-with-autoplay

No need for the options property
"There seems to be an issue when trying to create the slides elements, when the data is not ready yet. To fix it, use an *ngIf to create the slides only when the data is ready:

<ion-slides *ngIf="images && images.length"  autoplay="5000" loop="true" speed="500" class="slides" pager="true">
      <ion-slide *ngFor="let Image of images">
         <img src="{{Image.URL}}" alt="Product Image">
      </ion-slide>
 </ion-slides>

"
@1BJK903 @christlibon @timmhamers @pedy711 i hope you guys are able to go live with your app now

[Mystery1987]

$scope.$on("$ionicSlides.sliderInitialized", function (event, data) {
    $scope.slider = data.slider;
    $http({
        method: 'GET',
        url: "xxx"
    }).then(function successCallback(response) {
        $scope.sliderData = response.data;
        $scope.slider.stopAutoplay();
        $scope.slider.startAutoplay();
    });
});