Question

我有一个问题是在回调后重新初始化flexslider上的新幻灯片并刷掉/使用4张幻灯片，它将无效。

你可能想要检查一下jsfiddle。

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

另请注意，他们通过https://github.com/woothemes/FlexSlider实现了新功能slide.add（）和slide.remove（），没有关于这些新功能的更多信息。我不知道如何使用它们，然后我尝试了但它没有用。

我需要一个像循环一样的功能，当您向后滑动它还原旧幻灯片并移除新幻灯片时，然后您移动前移，它会移除旧幻灯片并添加新幻灯片，因为移动设备上的DOM内存性能。

任何帮助或建议，如iframe，ajax加载HTML就会非常感激。

谢谢！

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函数的错误，所以我重置了这些值并且它有效。

Answer 2

我挖掘了代码，发现 end 参数传递了一个滑块对象，您可以调用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>');
   }  
  });
});

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**);

jQuery Mobile + Flexslider - 在回调后使用渐进式图像加载AJAX的幻灯片

3 个答案: