Slides fade effect issue

I can’t get working with the fade effect with Ionic 4 beta-12. I’m using the options attribute (
It was working on earlier versions of Ionic 4

@ViewChild(Slides) slides: Slides;
      this.slides.options = {
        effect: "fade",
        fadeEffect: {
          crossFade: true

Does anyone manage to get the fade effect working?

Setting ion-slides options is a bit different from Swiper api. Try with the following:

this.slides.effect = 'fade';
this.slides.fade.crossFade = true;

Thank you Hariman
However, it didn’t work in ngOnInit()

Does it work for you with Ionic 4 ?

I used to do like it on Ionic 3. Now that I checked the documentation for Ionic 4, your first code was right, sorry.

So, I think it’s a bug on Ionic 4. You can check if it has been reported here:

Which beta version?

Have you tried to bind your code on ’ ionSlidesDidLoad()’ ?

 ion-slides (ionSlidesDidLoad)="yourFunction()">
1 Like

beta 12
It tried with the ionSlidesDidLoad callback, but it didn’t work either.

and the following:

<ion-slides [options]="myOptions"/>

 myOptions = {
    effect: 'fade',
    fadeEffect: {
      crossFade: true

did you check the swiper GitHub to check if there aren’t some hint about this subject?

Are there any updates on this? I’m using the latest version but fade effect is still not working.


   ionic (Ionic CLI)             : 4.5.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.17
   @angular-devkit/build-angular : 0.8.8
   @angular-devkit/schematics    : 0.8.8
   @angular/cli                  : 6.2.8
   @ionic/angular-toolkit        : 1.2.0


   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : browser 5.0.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.1, (and 7 other plugins)


   ios-deploy : 2.0.0
   ios-sim    : 6.1.2
   NodeJS     : v8.12.0 (/usr/local/bin/node)
   npm        : 6.4.1
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

There is a fix for the fade effect which should land in one of the next version of Ionic v4: see

This will definitely work for you

1 Like