Flexslider CSS 会导致图像消失

flexslider css causes images to disappear

本文关键字：图像 消失 CSS Flexslider      更新时间：2023-09-26

我一直在玩弄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演示中。

Flexslider 会隐藏幻灯片，直到初始化它以防止 FOUS。

你可以在这里看到以下css：https://github.com/woothemes/FlexSlider/blob/master/css/base.less

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

经过大量测试，我注意到在头部运行 javascript 文件并不能正确初始化我的文件。对我来说，我似乎只能在结束正文标签之前的页面正文中初始化 javascript。

相关文章：