Question

我一直在疯狂地试图找到我在这里做错了什么。我刚刚设置了一个测试html页面，其中包含来自演示页面的EXACT代码和图像 http://flexslider.woothemes.com/thumbnail-controlnav.html

<body>
<head>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="jquery.flexslider.js" type="text/javascript"></script>
<script type="text/javascript">

// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
  });
});

</script>

</head>
<div class="flexslider">
    <ul class="slides">
         <li data-thumb="slide1-thumb.jpg">
          <img src="slide1.jpg" />
        </li>
        <li data-thumb="slide2-thumb.jpg">
          <img src="slide2.jpg" />
        </li>
        <li data-thumb="slide3-thumb.jpg">
          <img src="slide3.jpg" />
        </li>
        <li data-thumb="slide4-thumb.jpg">
          <img src="slide4.jpg" />
        </li>
    </ul>
</div>
</body>

除了在我的4个图库中，Flexslider突出显示缩略图1并显示图像4，然后突出显示缩略图2并显示图像1等这一事实外，一切都很好。

缩略图1显示图像4 缩略图2显示图像1 缩略图3显示图像2 缩略图4显示图像3 然后它循环。

有没有人有任何想法？

请保存我的头！

Demo of above code

Answer 1

这个问题发生在我身上。当我检查下载的文件（woothemes-FlexSlider-version-2.2.2-0-gce5441b）时，我注意到演示页面（thumbnail-controlnav.html）显示的图像顺序不正确。我做了什么，我将它与实时网站http://flexslider.woothemes.com/thumbnail-controlnav.html进行比较并更新我的脚本jquery.flexslider.js的副本然后它工作正常！

Flexslider w / thumbnail controlNav - 不同步

1 个答案: