Flexslider添加幻灯片(Ajax内容)

5
我正在编写一个页面,其中有4个幻灯片,包含大量图像内容。为了提高加载速度,我们想要只加载第一张幻灯片。然后在加载完成后,通过ajax调用获取剩余的幻灯片并将它们添加为幻灯片。
Flexslider V2有一个 .addSlide 函数可以实现这一点,但是我一直收到“ slider.addSlide不是函数”错误。
非常感谢您的任何帮助。谢谢 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>

[更新]

看起来如果你只有一个幻灯片,Flexslider 就不接受这些额外的功能。通过从两张幻灯片开始,这个想法可以正常工作。这很可能是 Flexslider 的一个错误或故意设计的特性。


allowOneSlide是v2.2+中的一个属性,请参见:github.com/woothemes/FlexSlider#allowoneslide-new - Keanan Koppenhaver
1个回答

4

我最近也遇到了同样的问题,后来我查看了源代码并发现开发人员设置了一个检查,如果幻灯片数量等于1 (Line 882)。

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


1
allowOneSlide是v2.2+版本中的一个属性,请参考: https://github.com/woothemes/FlexSlider#allowoneslide-new - Keanan Koppenhaver

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接