jQuery Mobile + Flexslider - Slideshow with progressive image loading AJAX after a callback

Question

im having an issue to reinitialize new slides on flexslider after of a callback and 4 slides were swiped/used, it won't work.

There an jsfiddle you may want to check it.

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

Also notice they implemented new functions are slide.add() and slide.remove() via https://github.com/woothemes/FlexSlider there no further information about these new functions. I had no idea how to use them, then i tried it but it didn't work.

I would need a function like a cycle when you swipe back it restores old slides and removes new slides, then you swipe foward, it removes 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.

Thank You!

Answer 1

I was able to fix it with some property exploring:

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 remove all of the slides, just remove the .not(":last") from the first part and set slider.count = 0.

It seems a bug on the removeSlide and addSlide functions, so I've reseted the values and it worked.

Answer 2

I dug into the code and found the end parameter passes a slider object, which 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>');
   }  
  });
});​