ionic-framework: slide effect not working in ionic 4.10.2

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.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 5
Comments: 22 (6 by maintainers)

Most upvoted comments

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!

liamdebeasi on Feb 28, 2019

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:

Ionic users do not need to include the swiper animations in their bundle if they aren’t using it.
Users can still incorporate the flip, fade, cube, and coverflow effects. We will provide instructions on how to do so in the Ionic Docs.
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!

liamdebeasi on Apr 4, 2019

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!

liamdebeasi on Mar 21, 2019

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!

liamdebeasi on Apr 16, 2019

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 on Apr 18, 2019