我有一个问题是在回调后重新初始化flexslider上的新幻灯片并刷掉/使用4张幻灯片,它将无效。
你可能想要检查一下jsfiddle。
另请注意,他们通过https://github.com/woothemes/FlexSlider实现了新功能slide.add()和slide.remove(),没有关于这些新功能的更多信息。我不知道如何使用它们,然后我尝试了但它没有用。
我需要一个像循环一样的功能,当您向后滑动它还原旧幻灯片并移除新幻灯片时,然后您移动前移,它会移除旧幻灯片并添加新幻灯片,因为移动设备上的DOM内存性能。
任何帮助或建议,如iframe,ajax加载HTML就会非常感激。
谢谢!
答案 0 :(得分:7)
我能够通过探索一些属性来修复它:
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
函数的错误,所以我重置了这些值并且它有效。
答案 1 :(得分:3)
我挖掘了代码,发现 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>');
}
});
});
答案 2 :(得分:0)
使用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**);