There are quite a few old topics about “dynamic” slides or injecting slides into a slidebox. Most of these are based on pretty old versions of Ionic.
I’ve created a new one that shows how to add a slide dynamically. This can be used in situations where you don’t want the entire slide on the DOM at the same time even though you know all the slides in advance. You could use various mechanisms to decide which slides should be visible at any given time.
Let me know if you have suggestions for improvements.
So… you have probably seen my posts elsewhere regarding lazy loading. Someone suggested that I use the “slide-viewable” property to load dynamically instead of ng-iffing the content of my slides. Right now, the ng-if version still takes a long time to load with many slides. Will the slide-viewable property prevent loading of the HTML until called?
I would be using this to land on a particular slide somewhere in the array, show 3-5 slides in the vicinity, and then prepend and append slides as the slidebox is navigated. It is a significant refactor because I will have to manage index positions in a more complicated way, it would seem, so I wanted to check before I go to the trouble.
Sorry, I was confused when I wrote this… it was actually you who mentioned “viewable”, not “slide-viewable”. I’m not familiar with the viewable property, anyhow, but this is the thread it came from:
Sorry… Either way, the question still stands regarding whether the viewable property prevents the DOM from loading until it is triggered true, or whether I need to implement any special handling to make this happen.
Thanks for the demo @Calendee, very easy to follow, and works great on my device.
Is there any support for appending and prepending slides dynamically, while maintaining the position of the current slide in the middle? Following this other great codepen http://codepen.io/anon/pen/loijb by @carina works great on the browser, but the $ionicSlideboxDelete.slide() is very jumpy on my iPhone, making it flicker and make random jumps.
I made this demo of infinite generated slides and it is based on the nightly Ionic. It keeps three and only three slides in the DOM and in the backing data structure.
It seems to work just fine under “normal” circumstances both on desktop ( Chrome ) and on devices.
However I can see two UX problems:
Visual issues during quick looping through the slides ( try clicking on the Next button quickly and many times )
A smal drag and release of a slide will temporary show a white area on release. -> Nothing to do with dynamic slides, I found it happening also with hardcoded slides when using the nightly. Likely an Ionic bug. See https://github.com/driftyco/ionic/issues/2625
UPDATE Nov 30: The demo no longer works as expected since the latest slidebox refactor in nightly. Moving target…
UPDATE Dec 07: Here is a new version that works. Not perfect but it proves it’s doable:
Nice work. Seems to work pretty well to me. I can’t improve on it. I wouldn’t about those small white areas flashing. You’ve got to be doing crazy fast stuff on a device to make those happen. People just aren’t going to click that fast.
Thanks. Soon enough I’ll put that mechanism in real-world scenario and see how solid the whole thing really is. I am still interested though if there are any better or alternative implementations with the same requirements - unknown number of slides and a (very) smooth user experience.
Fun fact: If the user swipes really fast now, multiple selects will be queued. Eg if you swipe three times in quick succession, it will run three sequential swipes.
I found this behavior in the iOS photos app and thought it was the best way to deal with this case.
@andy It is very obvious what happens when you swipe or click on Previous or Next - whatever change was done in the last refactor causes the slide box to keep on going. Just try and see. The original demo code was make with nightly 805 or so, and such a problem did not exist.
The question maybe is what is the correct way to append and prepend slides programatically.
Thank for you demo @Calendee.
How about if we need add more slides before the first slide? I tried it and after add one more slide, the index of slide changed. I have to move next slide and this made slide do animate. And I think this does not make sense. Do you have any suggestion for this case?
I’m dealing with the same thing. Dynamically repeating slides while using ng-if or ng-filter shifts the slidebox index by 1, causing the slidebox to move an extra slide forward. All my efforts to override this are leaving me with a choppy re-render when I remove the slide or pop it off the array