[Solution] Add endless slides dynamically

[qroft]

I needed cycle2 to add new slides dynamically to the existing cycle-slideshow element.
The problem: if you use the "fadeout" FX the z-index (counting reverse) sooner or later might interfere with your layout or the z-index
setting of any element. Not to mention the amount of DOM data you will end up with (in my case hundreds of GIF animations playing in the background).
If I used "fade" as FX, there always the background visible for like half a second.

So here is my solution:
Pick a random image and add it to the cycle-slideshow
randNumber = Math.rand(0,1000); var newSlide = '<img src="pic"+randNumber+".jpg">'; $('.cycle-slideshow').cycle('add', newSlide);

Use the cycle-afterevent that is always triggered after a new slide has been added
slideshow.on("cycle-after", function (e, opts) { if(opts.slideCount >= 2){ $('.cycle-slideshow').cycle('remove', 0); } });
This way i never have more than 3 slides in my DOM. As soon as the third slide is added, the first one is removed.
Works like a charm.

Would be awesome if some of you could verify for me if this works for you.