Question

我的问题是关于Flexslider插件。我不知道为什么幻灯片出现故障。考虑我的加价：

<div class="flexslider">
  <ul class="slides">
    <li>First Slide</li>
    <li>Second Slide</li>
    <li>Third Slide</li>
  </ul>
</div>

我有这个结果：

第一个li显示为第二张幻灯片，第二个li显示为第三张幻灯片，第三个li显示为第一张幻灯片。

添加动画时会出现此问题：“幻灯片”选项，如下所示：

$(window).ready(function() {
    $('.flexslider').flexslider({animation: "slide"});
});

我很困惑，也许在我的代码中某处某些CSS会导致这种行为。

Answer 1

此问题是flexslider版本2.2.2下载包中的错误。即使下载的软件包中的演示文件也不能正常工作！

经过如此多的调查后，我发现“jquery.flexslider.js”存在问题，并从2.2.0版本获得了一个工作文件。

解决方案：获取工作包版本2.2.0。如果您有兴趣发表评论，可以下载工作包。

Answer 2

如果没有所有代码，很难说出现了什么问题，但这可能是一个解决方案。

$(window).ready(function() {
  $('.flexslider').flexslider({animation: "slide", startAt: 0});
});

Answer 3

这是因为你把幻灯片放在一个无序的列表中，你应该使用这样的有序列表：

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="flexslider.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="jquery.flexslider.js"></script>

    <script type="text/javascript" charset="utf-8">
      $(window).load(function() {
        $('.flexslider').flexslider({animation: "slide"});
      });
    </script>
</head>
<body>
    <div class="flexslider">
      <ul class="slides">
        <li>First Slide</li>
        <li>Second Slide</li>
        <li>Third Slide</li>
      </ul>
    </div>
</body>
</html>

编辑：尝试更新的代码。确保在JS之前加载flexslider.css并使用$（window）.load

Flexslider插件幻灯片无序

3 个答案: