JQuery Mobile + Flexslider - Slideshow with progressive loading of AJAX images after callback

Question

im having a problem to reinitialize new slides on flexslider after the callback and 4 slides that were taken / used, this will not work.

Here you can check it out.

http://jsfiddle.net/mtgv7/3/

Also note that they implemented new features: slide.add () and slide.remove () via https://github.com/woothemes/FlexSlider , there is no additional information about these new features. I had no idea how to use them, then I tried, but that didn't work.

I will need a function similar to a loop, when you swipe back, restores old slides and deletes new slides, then you delete foward, delete old slides and add new slides due to DOM memory performance on mobile devices.

Any help or suggestion like iframe, ajax load HTML on this would be really appreciated.

Thanks!

Answer 1

I managed to fix it using some property:

http://jsfiddle.net/mtgv7/10/

end: function(slider){ // remove all but the last slide slider.slides.not(":last").map(function(idx, slide) { slider.removeSlide(slide); }); slider.currentSlide = 0; slider.count = 1; // 1 because we left 1 slide // add slides here slider.addSlide('<li>...'); } 

If you want to delete all slides, just remove .not(":last") from the first part and set slider.count = 0 .

There seems to be a bug in the removeSlide and addSlide , so I reset the values ​​and worked.

Answer 2

I dug up the code and found that the end parameter passes a slider object that you can call the addSlide function.

 $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: false, directionNav: true, slideshow: false, animationLoop: false, end: function(slider){ //When 4 slides are done, it creates a callback function, but the slider is broken. alert("Callback after of 4 slides"); slider.addSlide('<li><img title="Random 2." src="http://i.imgur.com/i32ru.jpg"> <p class="flex-caption">Captions and cupcakes. Winning combination.</p> </li>'); slider.addSlide('<li><img title="Random 2." src="http://i.imgur.com/6sMlb.jpg"> <p class="flex-caption">Captions and cupcakes. Winning combination.</p> </li>'); } }); });​ 

Answer 3

Use the slider.addSlide offset function to indicate the index of your new slide. For example:

 slider.addSlide('<li><img title="Random 2." src="http://i.imgur.com/i32ru.jpg"> <p class="flex-caption">X</p> </li>', **slider.currentSlide+1**);