Slide's ionSlideDidChange not triggered

Ionic Framework ionic-v3
#1

Hello there!

I am currently trying to build a calendar with infinite horizontal slides. The idea would be, to have 3 slides and to keep the user always in the center and update the values around it.

This plunkr shows, how I would like it to work:

In this exapmle swiping quickly left and right updates the counter correctly.

However having basically the exact same local setup to the plunkr, I get regularly stuck.

I hope I can explain it in an understandable way:

  • When I drag the item way beyond the end and then let it go, the slider correctly centers the item, but does not trigger the didChange event. This causes the rotate function never getting called, therefore the data not updating and the slider position not resetting.
  • When I swipe fast to the left end, the Slider also gets stuck. Meaning, even if I continuously swipe to the left (as if there where other, perpending slides) no events get fired at all. Swiping quickly to the right somewhat works, because the didChange event is fired as if I scrolled to a fourth slide.

I know that my explanation is super vague and probably not very clear, but I don’t really know how to explain it any better… I’m also super frustrated, that I cannot reproduce the bug via the plunkr, so the only way to show it might be via video?

Has anybody experienced something similar? Any idea how to “force” the slider to push updates on the current slide?

#2

Hi,

If I understand, you can use this command: update(). Its will apply the changes in your Slides.

E.g:
@ViewChildren(‘slides’) slides: QueryList;

this.slides.toArray().forEach((slide: Slides) => {
slide.update();
});

#3

Thanks for your reply!
But unfortunately this did not solve the issue :frowning:

Although, because I only had one ion-slides element I used ViewChild instead (I also updated the punkr; see home.page.ts).

As hinted earlier, I also created a screencast to show my issue:

https://drive.google.com/open?id=0B1HBrv_j1ZNpUVRGSmZrWWFHWXM
(HTML5 Player seems to be broken due to the video ratio?)

I hope this clears things up a little bit.

#4

Before I forget it again:

We use ionic-angular 3.4 for the project, but I also tried updating to 3.6.1, which is also the version I used to record the video.

#5

Another small update (I hope this doesn’t count as spamming :sweat_smile:)

I now also stripped the whole application apart, so that the sole root component loads the slider with numbers. Sill the same error! So it looks like it’s not some broken project structure that causes the error.

Something “global” is somehow prevent the slides to trigger…

#6

Okay this is the last one, I swear!

I figured it out!

Although somewhat hacky, I added a listener to ionSlideDrag, which calls the rotate function to recalculate the slides’ data and recenters it.

Of course I also don’t want to call rotate with every ionSlideDrag, that would be way too much. This is why I also added (mousedown) to the ion-slides parent component, which toggles a boolean value. This ensures, that for each drag sequence, rotate is only called once.

Here is the updated plunkr:

Look how smooth swiping is now!

#7

Cool! Thanks for showing the solution!