Recyclable virtual ion-slides


As using the newer ion-slides in ionic v1.2.4, there seems to be an oddity with the ion-slide’s active/previous index.

Case in point, based on this fiddle which is what I am trying to accomplish:

3 Slides, with a backing array data that can be dynamic.

Based on the scrolling position, to be able to select the appropriate data from the backing array, and slot it into the appropriate slide based on the direction to take. I have used the following threads which is where the inspiration comes from:

Ultimately, the end objective is to keep the DOM minimum, and just refresh/update the appropriate slide in place thus reducing the memory overhead as to regards dynamic slides.

The pagination indicator underneath is to act as a clue as to which slide is visible, in that way, handle it appropriately.

From the console.log output, the activeIndex / previousIndex of the swiper is not consistent.

swiping forward, (from right to left, in order to advance the position forward), the index wraps around from 3 to 0.

swiping backwards (from left to right, in order to reverse the position backwards), the index wraps around from 0 to -1.

Any idea/insight as to why the inconsistency of the wrap around, this leads to slide data in the backing array to be slotted into an incorrect slide.

What to do if I want a lot of slides in a slider?