Infinite slide/swipe of items


Hi guys!

My message is quite big, briefely:

How do you correctly unshift an element into ion-slide-box and not to change current index?

Full description:

I am creating an application, that displays your workouts.

Each screen has a listing of workouts for current week.

  • By swiping left, you get a previous week.
  • By swiping right, you get next week.

A few commits earlier i had a view with several fields like this.

<div ng-repeat="workout in workouts" on-swipe-left="prevWeek()">

prevWeek() changed the “workouts” array, loading workouts for previous week. So when it was changed, angular loaded it immediately to HTML.

But now I want to make it look smooth: when swiping left, i want to have an animation of swipe and upcoming new workouts.

I googled that and decided to make it with ion-slide-box. My plan was:

Load current week, previous and the next

  1. Display them with dynamic
  2. Swipe left/right.
  • If reached right end, load new week and push() it to workouts array (2. step would display it as proper)
  • If reached left end, load new week and unshift() it to workouts array.

The bug is at the very last step. By unshifting a new element, that should be displayed, ion-slide-box moves me to this very last week. So if a have array [‘c’,‘d’,‘e’] and default value is 1 (‘d’). Then, i move to 0 element (‘c’), a new element ‘b’ is unshifted at 0 index (now array is [‘b’,‘c’,‘d’,‘e’]), BUT ion-slide-box moves me automatically to index 0 (element ‘b’), not remaining at ‘c’.

Sorry for the long post. Shall add a brief descr at the begginnig.

Very simple Codepen upcoming



Not solved yet, but probably will try not to add new elements, but to change already existing.



Approved, solved my problem with the codepen above