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!

Ahl

I don't understand what you're trying to do. You're trying to dynamically load each image upon sliding them in and removing the image sliding out? What does the 4 slides have to do with anything? Please elaborate. – Leaseholder

You can see this jsfiddle, when the callback happens after of next 5 slides, it should to do an AJAX to load new 5 slides and remove 5 old slides. Also make sure if you do previous 5 slides, it should to remove 5 new slides and load 5 old slides, it's just like a cycle. – Ahl

I have the exact same problem, Ivan. I've read responses from Tyler himself to questions similar to these saying "reinitialize the flexslider." Well, I've tried that, and I get results similar to yours. I recursively call the flexslider function, but it just empties everything out and doesn't "re-index" the slide count and position. – Socialite

Yes rob, i noticed it won't reinitialize, so it makes me wonder there 2 functions like slide.add() and slide.remove(), i think we need to wait that they will update the documentation. – Ahl

In the github readme, it says that addSlide() needs two parameters: slider.addSlide(obj, pos) accepts two parameters, a string/jQuery object and an index. – Banjermasin

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.

Binucleate

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>');
   }  
  });
});​

Clearness

That's pretty cool!, look there no way to remove slides after of callback. – Ahl

Answer 3

Use the offset feature of slider.addSlide to specify 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**);

Enlace