New Ionic's v1.2 ion-slides/swiper active/previous Index

[t0mm13b]

Short description of the problem:

Attempting to create an infinite slider view of dynamic data over three slides,

This is inspired by the thread(s) which uses the older original slidebox. I am attempting to create a new version using the latest v1.2.4 ion-slides.

• https://forum.ionicframework.com/t/what-should-i-do-if-i-want-to-show-thousands-of-pages-in-a-slide-box/14092/19
• https://forum.ionicframework.com/t/dynamic-slides/8002/25

There is a funny going on with the swiper's activeIndex and previousIndex as far as the option's loop set to true is concerned.

The idea was to calculate the next slide in sequence based on the array and put it into a slider's position. The index offsets are throwing it off. The pagination is there for a guide to determine where are we on the slider's viewpoint.

I have set the effect to be 'coverflow' and when going from beginning, swipe to the left to right, to wrap around to the end, the effect is noticeable and the indexes go into negative.

The jsfiddle is here, https://jsfiddle.net/t0mm13b/q4vb4tee/1/

I am testing it on the desktop.

Can anyone shed some insight into this based on the console log which shows how the indexes go into negative.

[mattchue]

Did you find a fix for this? I believe I am experiencing a similar issue while trying to create dynamic slides.

[t0mm13b]

@mattchue still trying to get my head around, spent about 4/5 days trying to figure it out.

[mattchue]

I've managed to isolate my issue down to something codepen-sized. I believe that $compile is not being called on the swiper-slide-duplicate class which ultimately results in the duplicate slides not being bound to the correct scope, or at least not the same scope as the other slides. I am looping slides.

Codepen: http://codepen.io/anon/pen/vGGvaP?editors=1010

1. Initial value is set to 0, changed to 100 by a 500ms $timeout
2. Value change is reflected on the first slide
3. Slide backwards, to the slide at index 3, and the bound value is set to 0 (should be 100)
4. Wiggle the slide and the value gets updated to 100

I'm pretty sure that Swiper does something with hiding and showing the duplicate slides to make the looping easier, and those duplicate slides are just not tied to the controller's $scope.

[t0mm13b]

@mattchue painful eh...similar to what am doing, creating a recyclable slides, 3 of 'em to be exact, and to reuse each slide when looping around to create illusion of infinite swiping.

[mattchue]

@t0mm13b yeah, that's what i did with slidebox. i was hoping to be able to get a bit of a cleaner implementation than that with the swiper component. were you planning on reopening this issue?

[t0mm13b]

could do with reopening it, as there's something seriously wonky with the new swiper component, after all, the old slidebox is in the deprecation/departure lounge and did not have much properties and was leaning on high hopes that this newer component would make it easier to deduce. how wrong I was. plus the documention on ionic's site about this new component is sparse.

[mattchue]

I've been using the Swiper docs with which you have to do a little translating, but overall they're easy to use to figure out how the new swiper works.

[t0mm13b]

@mattchue here's the latest codepen that I have been working on to get right, still buggy when at the beginning and end. Thought you might have a peeksy some time.

[danbucholtz]

Hi @mattchue and @t0mm13b, I have started look at this issue.

I have an active branch open called 5739/slider-loop-not-updating.

I am hacking it up here just trying to get it working correctly, then I will clean the code up.

Here's where I'm at:

1. If I get access to the element's scope from angular, I can set a watch on it and see the data changing.
2. I cannot see the data rendering correctly in the UI beyond the initialize rendering.
3. The scope in question is connected all the way to the root scope and does see changes as mentioned above.

Any thoughts on this?

[t0mm13b]

Hi @danbucholtz thanks for the comment, and for taking the time to check it out.

For point 2, that would somewhat, in my head, conclude that why the indexes are out. Unless there's something else at play there in relation to swiping.

Is there anything else that can be done?

Thanks again.

[danbucholtz]

Hi @t0mm13b and @mattchue, as a status update, I have come up with a solution for this... but it is not at all performant 💯 . I am going to come up with something that performs better. It may require an API change, so would you two be open to testing it out and giving it feedback if we go that route?

[t0mm13b]

Hi @danbucholtz,

Thanks for getting back 👍

Thats great to hear, and yes, I am open to testing it out.

[mattchue]

@danbucholtz, I can definitely test it as well.

[danbucholtz]

I think I have resolved this issue. Can you go ahead and test against the nightly build tomorrow or later? You can pull it down from here.

Please use that file in place of your www/lib/ionic/js/ionic.bundle.js file.

I will re-open the issue if you continue to have issues.

Thanks,
Dan