jQuery Mobile + Flexslider - 带有渐进式图像加载的幻灯片，通过回调后进行AJAX加载。

Question

在flexslider的回调函数中，当4个幻灯片被滑动/使用后，我遇到重新初始化新幻灯片的问题，它无法正常工作。

这里有一个jsfiddle供您参考。

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

请注意，他们通过https://github.com/woothemes/FlexSlider实现了新的函数slide.add()和slide.remove()，但没有关于这些新函数的进一步信息。我不知道如何使用它们，然后我尝试了一下，但它没有起作用。

我需要一个类似循环的函数，当你向后滑动时，它会恢复旧的幻灯片并删除新的幻灯片，然后你向前滑动，它会删除旧的幻灯片并添加新的幻灯片，以便在移动设备上提高DOM内存性能。

任何像iframe、ajax加载HTML之类的帮助或建议都将不胜感激。

谢谢！

- Ivan

---

我不明白你想做什么。你是想在滑动图片时动态加载每个图像，并移除滑出的图像吗？四个幻灯片与任何事情有关系吗？请详细说明。 - Andre

您可以查看此jsfiddle，当回调在下5张幻灯片之后发生时，它应该执行AJAX以加载新的5张幻灯片并删除旧的5张幻灯片。同时，请确保如果您向前翻到上一个5张幻灯片，则应删除5张新幻灯片并加载5张旧幻灯片，就像一个循环一样。 - Ivan

我和你有完全相同的问题，Ivan。我读到Tyler自己对类似问题的回复中说“重新初始化flexslider”。嗯，我尝试过了，结果和你的类似。我递归调用flexslider函数，但它只是清空一切，不会“重新索引”幻灯片计数和位置。 - rob - not a robber

是的，Rob，我注意到它不会重新初始化，所以让我想知道为什么有2个函数，比如slide.add()和slide.remove()，我认为我们需要等待他们更新文档。 - Ivan

在 Github 的自述文件中，它说 addSlide() 需要两个参数：slider.addSlide(obj, pos) 接受两个参数，一个字符串/jQuery 对象和一个索引。 - Mottie

Answer 1

我能够通过一些属性探索来修复它： 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>...');
}

如果你想删除所有幻灯片，只需从第一部分中删除.not(":last")并设置slider.count = 0。

看起来removeSlide和addSlide函数存在一个bug，所以我已经重置了值，并且它可以工作。

- Ricardo Souza

Answer 2

我查看了代码，发现 end 参数传递了一个 slider 对象，你可以调用 addSlide 函数。

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

- Jeremy Peterson

---

这很酷！看起来没有办法在回调之后删除幻灯片。 - Ivan

Answer 3

使用 slider.addSlide 的偏移量功能来指定新幻灯片的索引。例如：

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

- jonincanada