Flexslider 添加幻灯片（Ajax 内容）答案

【问题标题】：Flexslider Add Slide (Ajax Content)Flexslider 添加幻灯片（Ajax 内容）
【发布时间】：2012-07-11 14:48:56
【问题描述】：

我正在编写一个页面，其中有 4 张幻灯片，其中包含大量图像内容。为了提高加载速度，我们只想加载第一张幻灯片。然后在加载之后，我们将通过 ajax 调用获取其余部分并将它们添加为幻灯片。

Flexslider V2 对此有一个 .addSlide 函数，但是我不断收到slider.addSlide is not a function 错误。

任何帮助将不胜感激。谢谢

这是我的代码。

<!DOCTYPE html>
<html lang="en">
<head>

<link rel="stylesheet" href="_slider/flexslider.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="_slider/jquery.flexslider-v2-min.js"></script>

<script type="text/javascript">
$(window).load(function() {
     $('.flexslider').flexslider({

        animation: "slide", 
        slideshow: false, 
        controlNav: false, 
        controlsContainer: ".flex_wrap", 
        start: function(slider){

            //Load another slide and append it to the html
            $.get('landing_page_step1.html', function(data) {
              $('.slides').append(data);
            });

            //Tell flexslider to add this as a slide
            slider.addSlide(".step1", 1);     
        }

      });
 });    
</script>

</head>

<body class="landing_page">

<div class="flex_wrap">
  <div class="flexslider grid_12">
    <ul class="slides">
      <li>
              Slide One
      </li>
    </ul>
 </div>
</div>

</body>
</html>

[更新]

如果您只有一张幻灯片，那么 flexsider 似乎不接受这些额外功能。从两张幻灯片开始，这个想法很有效。这很可能是 flexslider 的错误或预期功能。

【问题讨论】：

allowOneSlide 是 v2.2+ 中的一个属性，参见：github.com/woothemes/FlexSlider#allowoneslide-new

标签： javascript jquery ajax slider flexslider

【解决方案1】：

我最近遇到了同样的问题，最后我查看了源代码，发现开发人员检查了幻灯片的数量是否等于 1 (Line 882)。

我刚刚注释掉了整个 if 语句，当我只有一张幻灯片时它就开始工作了。

【讨论】：

allowOneSlide 是 v2.2+ 中的一个属性，参见：github.com/woothemes/FlexSlider#allowoneslide-new