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

复制他们拥有的 slider ，但是这些图像根本不显示。一旦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;
    }
}