Ionic-framework: [ionic 4.0.0-beta.12] Slides: FadeEffect does not work

[DavidDudson]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.12
   @angular-devkit/core       : 0.8.3
   @angular-devkit/schematics : 0.8.3
   @angular/cli               : 6.2.4
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.4, (and 16 other plugins)

System:

   Android SDK Tools : 26.1.1 (/home/davidd/Android/Sdk)
   NodeJS            : v10.11.0 (/usr/bin/node)
   npm               : 6.4.1
   OS                : Linux 4.15

Describe the Bug
Given effect: 'fade' the slideshow continues to use the standard animation.

Steps to Reproduce
Steps to reproduce the behavior:

1. Create an ion slides component
2. add [options]="{effect: 'fade'}"
3. Use autoplay, or manually trigger slide transitions
4. View animation

Related Code

My full slide opts are as follows

  slideOpts: SwiperOptions = {
    effect: 'fade',
    allowSlidePrev: true,
    allowSlideNext: true,
    direction: 'horizontal',
    autoplay: true,
    speed: 3000
  };

Expected Behavior
The effect to be the fade animation

Additional Context
Changing other parameters, such as direction works fine.

I'm assuming the issue is a pretty obvious one...

Ionic uses a custom swiper build:
http://idangero.us/swiper/api/#custom-build

As seen on this line it does not include the Fade effect:
https://github.com/ionic-team/ionic/blob/master/core/src/components/slides/swiper/swiper.js#L3

I'm all for keeping the base swiper small. But I cannot figure out how to alter the swiper bundle and/or create my own swiper bundle for ionic to use. Is there a workaround or some documentation I'm missing?

[Nazirovich]

Expected Behavior
The effect to be the fade animation

Agree

[jchri853]

coverflow effect does not work either

[SwenVogel]

The problem still exists in the latest version 4.0.0-beta.15. Any suggestions for any workaround?

[jmondragon]

None of the effect options seem work (except 'slide').

Swiper API:

Tranisition effect. Could be "slide", "fade", "cube", "coverflow" or "flip"

[SwenVogel]

As workaround i used ngx-swiper-wrapper.

[LuizTokuhara]

As workaround i used ngx-swiper-wrapper.

Hi, how did you fix it using ngx-swiper-wrapper? Just install it? Could you explain.
Thanks!

[edgarelc]

This is still an issue in version 4.0.1 :(

[liamdebeasi]

Hi there,

This has been resolved via https://github.com/ionic-team/ionic/pull/17959 and is available now in Ionic. Please see the ion-slides documentation for instructions on how to use the effects in Ionic.

Thanks for using Ionic!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.