flexslider css导致图像消失

Question

我一直在努力把flexslider添加到我的网站上，最初在实现这些功能时遇到了麻烦。 检查了演示代码后，我决定将它们提供的示例代码复制到我自己的html中以查看结果。 遵循网站的教程

<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>

然后，我复制了演示文件的图像

        <div class="flexslider">
      <ul class="slides">
        <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
            </li>
            <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
            </li>
            <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
            </li>
            <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
            </li>
      </ul>
    </div>

复制它们所具有的滑块，但是这些图像根本不显示。 一旦CSS文件

<link rel="stylesheet" href="flexslider.css" type="text/css">

被删除，它再次显示。 有谁知道为什么图像似乎消失了，或者我怎样才能将其正确格式化为flexslider演示。

Answer 1

Flexslider隐藏幻灯片，直到对其进行初始化以防止FOUS为止 。

您可以在此处看到以下CSS： https : //github.com/woothemes/FlexSlider/blob/master/css/base.less

.slides {
    > li {
       display: none; 
       -webkit-backface-visibility: hidden;
    }
}

Answer 2

经过大量测试，我注意到在头部运行javascript文件无法正确初始化我的文件。 在我看来，我只能在关闭body标签之前在页面的主体上初始化javascript。