Ion-slides ionSlideDidChange don't work on RC-5

Ionic Framework ionic-v3
1

Hi,

I have

<ion-slides effect="coverflow" (ionSlideDidChange)="slideChanged()">

and when I slowly swipe a slide it has not called, but if I swipe fastly it is called.

It’s error was in RC-4 but I used onTransitionEnd in swiper but now it’t not possible

mySlideOptions = {
    loop: false,
    onInit: s => {
        this.swiper = s;
    },
    onSlideChangeEnd: s => {
        //this.onDidChange();
    },
    onTransitionEnd: s => {
        this.onTransitionEnd(); <-- I used this
    },
    effect: 'coverflow',
    centeredSlides: true,
    slidesPerView: 1,
    coverflow: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 4,
        slideShadows: false
    }
};

how can I do it right now?

PD: It happen with all effect (fade, cube, coverflow or flip) but with default effect work fine.

2

hi, from the RC5 changelog:

ion-slides was refactored to remove the external dependencies, and rewritten in TypeScript/ES6 modules to again improve tree shaking abilities. In order to work with tree shaking, the options attribute had to be removed. See the Slides API Documentation for usage information.

3

Hi @pe1,
Thx for your answer.
I understand that, anyway ionSlideDidChange only is called with slide effect :frowning:

Regards!

4

Hi @jbgomez21, it seems to work fine for me, i didn’t notice any problems with ionSlideDidChange event in RC5:

<ion-slides pager='true' effect='slide' initialSlide='0' loop='false' #imageSlider *ngIf="params.data.images" (ionSlideDidChange)="onSlideDidChange($event)" class="slides-images">

5

Yes, It’s work because you are using effect=‘slide’, change it for effect=‘cowerflow’ and swipe slowly and it does not work.

Regards!

6

yes till today the issue do exists. workaround fix : provide spaceBetween=“n” for ion-slides
thanks

7

Hi

This is still a problem see below the problem occurs when the pager changes before the slide has been released (on a real device too):
Here the title should change for each slide.

IonSlides ionSlideDidChange problem (1)
IonSlides ionSlideDidChange problem (1).gif345×699 2.38 MB

8

Workaround:

<ion-slides pager effect="coverflow" (ionSlideDidChange)="slideChanged($event)" (ionSlideDrag)="slideDrag($event)">

  lastDragEventToken: number;

  slideDrag(event?: any) {
    if (this.lastDragEventToken) {
      window.clearTimeout(this.lastDragEventToken);
    }
    this.lastDragEventToken = window.setTimeout(()=>{
      this.slideChanged(event);
      window.clearTimeout(this.lastDragEventToken);
      this.lastDragEventToken = 0;
    }, 300);
  }