Flexslider添加幻灯片(Ajax内容）

Flexslider Add Slide (Ajax Content)

本文关键字：内容 Ajax 添加 幻灯片 Flexslider      更新时间：2023-09-26

我正在写一个页面，其中有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>

[更新]

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

就在最近，我遇到了同样的问题，我最终查看了源代码，发现开发人员检查了幻灯片的数量是否等于一（第882行）。

我只是评论了整个if语句，当我只有一张幻灯片时，它就开始起作用了。

相关文章：