Ionic-framework: ionic2 ion-slides don't support well prepending to dynamic list of slides

[antoineol]

Short description of the problem:

The issue is noticed when prepending new slides on willChange/didChange events. pushing to the end is okay, but prepending also shifts the displayed slide. When sliding to the left, it skips a slide and goes to the one after.

What behavior are you expecting?

When prepending a slide dynamically, it would have no impact on the slide currently displayed, and the one we are sliding to. Changing of slide differently than normal swipe would be the result of an explicit call to methods like slideTo().

Steps to reproduce:

1. on a new Ionic 2 app, add an ion-slides, and a list of ion-slide with ngFor
2. Add an event listener like willChange to capture a slide change by the user (similar effect with didChange)
3. when sliding to the left, prepend a new slide to the list of slides
4. the user goes 2 slides to the left instead of 1.
5. the same thing when sliding to the right has no side-effect.

Template:

<ion-slides (willChange)="updateNumbers($event)" [options]="{initialSlide: 3}">
    <ion-slide *ngFor="let n of numbers">
        <h2>{{n}}</h2>
    </ion-slide>
</ion-slides>

In the component:

numbers = [-3, -2, -1, 0, 1];

updateNumbers(swiper:any) {
    let backward = swiper.swipeDirection === 'prev';
    if (backward) {

        // KO: it is shifting the displayed slide as well
        this.numbers.unshift(this.numbers[0] - 1);

    } else {
        // Pushing to the end is okay, no noticeable side-effect
        this.numbers.push(this.numbers[this.numbers.length - 1] + 1);
    }
}

Which Ionic Version? 2.0.0-beta.7

Plunker that shows an example of your issue

http://plnkr.co/edit/Lso4eq2d8z9KyulRAUsP?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.7
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
OS: Windows 7 SP1
Node Version: v6.2.0

[antoineol]

A more concrete example: an implementation of a basic infinite slider inspired by a small agenda I am working on.

The workaround used here is to override the target slide manually, but it breaks the animation. IMHO, ideally, the same should work without the workaround:

this.slider.slideTo(newIndex, 0, false);

and keep the animation. If I comment this workaround, I get the behavior previously described: shifting/unshifting elements on the array of slides shifts the currently displayed slide as well.

Maybe I missed something in the way to use the slider, feedbacks are welcome :)

[antoineol]

Hi! Any update about this issue? Will it be considered in a future release? Thanks a lot.

[jgw96]

Hello! Thanks for using Ionic! We are currently looking at a few options surrounding swiper, including moving the ion-slides component out to a separate package or possibly getting rid of our dependency on swiper all together and implementing our own slides from scratch. At this time we are focusing on our new build process and bug fixes as we get closer and closer to our first rc release, but you can be assure that issues like this with slides will be looked at in the future 😃

[daghendrik]

To reproduce this in Ionic 2 RC.0 the template in the example code has to use (ionWillChange) instead of (willChange).

Also, in "_updateNumbers(swiper:any)_" one has to replace "_let newIndex = this.slider.getActiveIndex();_" with _"let newIndex = swiper.activeIndex;"_ and "_this.slider.slideTo(newIndex, 0, false);_" with "_swiper.slideTo(newIndex, 0, false);_" as the Slide API (wrapping the swiper api) always returns undefined when using those methods.

[antoineol]

Thanks for the upgrade information. To upgrade this plunker to the RC.0, more steps are required (like NgModule, bootstrap...) as listed in the upgrade notes. Any working plunker using RC.0 around there I can use as a base? The one indicated for new issues is still using the beta.10.

[doender]

@architruc I think your workaround is not working anymore in RC.0. The corrective this.slider.slideTo(newIndex, 0, false); call doesn't seem to have an effect in the ionWillChange handler. Any chance you managed to fix this?

[antoineol]

Unfortunately no. I haven't updated my code to the RC.0 yet, so I haven't tested yet. When I can have time for that, I will also try to update the plunkers of this issue (not in the coming days though).

[jgw96]

Hello, all! I am going to close this issue as a duplicate of https://github.com/driftyco/ionic/issues/6515.

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