Flexslider添加幻灯片(Ajax内容)

dci*_*iso 5 javascript ajax jquery slider flexslider

我正在写一个页面,里面有4张幻灯片,里面有很多图像内容.为了提高加载速度,我们只想加载第一张幻灯片.然后在加载之后我们将通过ajax调用获得其余的并将它们添加为幻灯片.

Flexslider V2有一个.addSlide功能,但我一直收到slider.addSlide is not a function错误.

任何帮助将非常感激.谢谢

Flexslider

这是我的代码.

<!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>
Run Code Online (Sandbox Code Playgroud)

[更新]

看来如果你只有一张幻灯片,那么flexsider就不会接受这些额外的功能.从两张幻灯片开始,这个想法很好.它很可能是flexslider的错误或预期功能.

小智 4

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

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