Slides fade effect issue

Ionic Framework
1

Hi,
I can’t get working with the fade effect with Ionic 4 beta-12. I’m using the options attribute (http://idangero.us/swiper/api/)
It was working on earlier versions of Ionic 4

@ViewChild(Slides) slides: Slides;

      this.slides.options = {
        effect: "fade",
        fadeEffect: {
          crossFade: true
        }
      };
      this.slides.update();

Does anyone manage to get the fade effect working?

2

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

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

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

Does it work for you with Ionic 4 ?

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: https://github.com/ionic-team/ionic/issues.

5

Which beta version?

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

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

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

7

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? https://github.com/nolimits4web/swiper/

8

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

Ionic:

   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 (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)

System:

   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
9

There is a fix for the fade effect which should land in one of the next version of Ionic v4: see https://github.com/ionic-team/ionic/issues/17424#issuecomment-468438819

10

This will definitely work for you https://github.com/ionic-team/ionic/blob/ab9d3b269663987c62fe9189ea515e51443b2f77/core/src/components/slides/readme.md#cube

1 Like