Dynamic Slides

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.


As always @Calendee, great demo!

Really interested in seeing this demo, but I got the following error:

[blocked] The page at ‘https://codepen.io/calendee/pen/Kcxaw’ was loaded over HTTPS, but ran insecure content from ‘http://s.codepen.io/boomerang/ad7ebde490ba782330b2da131933e6c91407739585334/index.html’: this content should also be loaded over HTTPS.

Try with just this link without the https : http://codepen.io/calendee/pen/Kcxaw

Thanks, I’m able to see it now.

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.


I’ve never heard of slide-viewable. It doesn’t appear in the code for sliders : https://github.com/driftyco/ionic/blob/master/js/views/sliderView.js

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.


I see what you mean. In my sample, the viewable is filtered on in the ng-repeat like this :

<ion-slide ng-repeat="slide in data.slides | filter:{viewable : true}">
	<div ng-include src="slide.template"></div>

Angular does NOT create DOM elements for filtered items. So, they will not be in the DOM until the viewable property is toggled to true.

DOM with the “bonus slide” set to false:

DOM with “bonus slide” set to true:

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.

Any help is appreciated.


@MarcoAppMaker I also had this problem the first time I tried this method, but it’s been a while. Any thoughts out there?

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.

See the Pen Ionic Infinite Generated Slides by Zarko Hristovski (@zarko) on CodePen.

It seems to work just fine under “normal” circumstances both on desktop ( Chrome ) and on devices.
However I can see two UX problems:

  1. Visual issues during quick looping through the slides ( try clicking on the Next button quickly and many times )
  2. 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:

See the Pen Working Ionic Infinite Generated Slides by Zarko Hristovski (@zarko) on CodePen.

UPDATE Dec 09: Off for some diazepam at the farmacy :slight_smile:

UPDATE Dec 10: Back to the future.

See the Pen 2014-12-10 Working Ionic Infinite Generated Slides by Zarko Hristovski (@zarko) on CodePen.

Any ideas for improvements are welcomed. I hope @Calendee can pitch in too.


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.

@zarko I’m not seeing any problems with this in the latest nightly.

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.

Great, thank for the demo, @Calendee

Thanks for great demo but after changing the direction with rtl images are gone.

Any help would be highly appreciated.

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