slide effect not working in ionic 4.10.2

[thiagomatrix]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

Expected behavior:

Steps to reproduce:

Related code:

**in arquive.ts**

  slideOpts= {
    effect: 'fade',
    loop: true,
    speed:1500,
  };

  slidesDidLoad(slides: IonSlides) {  
    slides.startAutoplay();
  }

**in arquive.html**

<ion-slides #background (ionSlidesDidLoad)="slidesDidLoad(background)" [options]="slideOpts">
 <ion-slide class="welcome-slide">
 <h2>Slide 1</h2>
  </ion-slide>

  <ion-slide style="background-color: blue">
    <h2>Slide 2</h2>
  </ion-slide>

  <ion-slide style="background-color: red">
    <h2>Slide 3</h2>
  </ion-slide>
</ion-slides>

Other information:

Ionic info:

Not working in ionic 4.10.2 slide effect

only show effect flip, not set out effect.

[Nazirovich]

It's not working... I really hope they solve this issue asap... The fade effect on the sliders is much needed for my work.

[LuizTokuhara]

Yes, ion-slides are kind of buggy, only custom effect is working... if you put 2 or more sliders on same page it act strange too, some can loop and others not.

[yshnv]

ion-slides properties not working correctly. Unable to change effects of slides.

[edgarelc]

Same issue here... None of the effects in the swiper API works at all ("slide", "fade", "cube", "coverflow" or "flip"). The only one that works is "slide" which is the default one.

[microwin168]

I have same issue.Will this issue be fixed in plan?

[drew-r]

I'm finding something is calling toString on the options object before it is passed to swiper. From normalizeOptions:

Looks like react-dom is trying to convert it to string and leave it as a regular attribute, as I can work around it by reffing: handleSlidesRef = (ref: any) => ref && (ref.options = { initialSlide: 3, freeMode: true });

[microwin168]

@liamdebeasi Is this a bug? I need this function so much. .Will this issue be fixed in plan? Thanks for reply!

[microwin168]

@thiagomatrix Have you resolve this issue?

[liamdebeasi]

Hi there,

We have a PR currently in review that will bring more effects to ion-slides (including fade). https://github.com/ionic-team/ionic/pull/16616

Our plan is to get this into the next release of Ionic. Thanks for your patience!

[kalicki]

Don't have PR and fix at release (4.1.2)

[liamdebeasi]

Hi there,

We have not merged this PR in yet. The team is investigating how to properly integrate these changes into the framework. I will post here when it gets merged in.

Thanks!

[jmzwcn]

look forward to your good news!

[microwin168]

good job thanks so much!

[liamdebeasi]

Hi everyone,

After some discussion with the team, we have decided to go a different route with the swiper animation plugins. Instead of adding the additional animations directly into the framework, we have decided to expose the event handlers that swiper provides. This has a few benefits:

1. Ionic users do not need to include the swiper animations in their bundle if they aren't using it.
2. Users can still incorporate the flip, fade, cube, and coverflow effects. We will provide instructions on how to do so in the Ionic Docs.
3. Users can also develop and integrate their own custom animations.

I have created a PR for this here: https://github.com/ionic-team/ionic/pull/17959 which will be merged instead of #16616. Any feedback on this PR would be greatly appreciated!

Thanks!

[Nazirovich]

@liamdebeasi thank you very much for updating us. Looking forward to the release!! Good luck.

[microwin168]

Looking forward to the release!

[liamdebeasi]

Hi everyone,

I have merged https://github.com/ionic-team/ionic/pull/17959, and it will be in the next release of Ionic. I have published a nightly build if anyone would like to test it out and provide feedback. (npm i @ionic/angular@dev)

See https://github.com/ionic-team/ionic/blob/master/core/src/components/slides/readme.md for instructions on how to use.

Thanks!

[microwin168]

I have upgrade to Ionic@v4.3,but I can't apply effect property. slideOpts = { effect: 'cube', initialSlide: 0, speed: 300, direction: 'horizontal', loop: true, };

` <ion-slides pager="true" [options]="slideOpts">

Slide 1

                            <ion-slide>
                                <h1>Slide 2</h1>
                            </ion-slide>
                            <ion-slide>
                                <h1>Slide 3</h1>
                            </ion-slide>

`

[stilren]

I'm finding something is calling toString on the options object before it is passed to swiper. From normalizeOptions:

Looks like react-dom is trying to convert it to string and leave it as a regular attribute, as I can work around it by reffing: handleSlidesRef = (ref: any) => ref && (ref.options = { initialSlide: 3, freeMode: true });

This comment is overlooked - options does not even seem to be passed to the slider in react as of now.

[liamdebeasi]

Hi @microwin168,

Please follow all of the usage guide when applying animations: https://github.com/ionic-team/ionic/blob/master/core/src/components/slides/readme.md#cube

You will need to make sure the beforeInit, setTranslate, and setTransition properties are all set.

[liamdebeasi]

Hi @stilren,

The issue you are describing does not seem to be related to the slides effect. Please open a separate issue. Also make sure you note you are using React.

Thanks!

[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.