7

我在回调后重新初始化 flexslider 上的新幻灯片时遇到了问题，并且 4 张幻灯片被滑动/使用，它不起作用。

有一个 jsfiddle 你可能想检查它。

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

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

我需要一个类似循环的功能，当您向后滑动时，它会恢复旧幻灯片并删除新幻灯片，然后向前滑动，由于移动设备上的 DOM 内存性能，它会删除旧幻灯片并添加新幻灯片。

任何帮助或建议，如 iframe、ajax 加载 HTML 将不胜感激。

谢谢你！

4

3 回答 3

7

我能够通过一些属性探索来修复它：

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，所以我已经重置了这些值并且它起作用了。

于 2012-07-01T03:21:02.483 回答
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>');
   }  
  });
});​
于 2012-07-01T01:41:45.767 回答
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**);
于 2012-07-13T20:21:55.593 回答