Question

我正在开发自己的产品组合（现在还没有完成），我遇到了Flexslider 2的问题（Woothemes）。

见这里：http://www.gaelle-fernandez.fr/Folio2012/#Works 如果单击作品（任何图像），将打开一个滑动框，其中包含滑块和说明。如您所见，滑块在第一次打开时不显示图像，您必须至少等待10秒。这很令人尴尬，因为我想毫不拖延地展示我的作品......

这是我的 index.php

的代码

<head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <link rel="stylesheet" type="text/css" href="Styles/flexslider.css" media="screen"/>
   <script src="Js/jquery.flexslider.js"> </script>
</head>
<body>
    <script charset="utf-8" type="text/javascript">
         $(window).load(function() {
             $('.flexslider').flexslider({
               animation: "slide",
               controlNav: true,
               animationLoop: true,
               slideshow: false,
             });
          }); 
   </script>  
    <div id="header">
        <!-- my header content -->
    </div>
    <ol id="main" class="curtains">
        <li id="Works" class="cover">
            <h2 style="padding-left:615px;">Derniers Travaux</h2>
            <div id="slickbox">
               <div id="sliderContent">
                   <div class="flexslider">
                        <ul class="slides">
                            <li>
                                <img src="Img/creas/crea.png" />
                            </li>
                            <!-- other images -->
                        </ul>
                    </div>
                </div>
                <h1>TITLE </h1>
                <p>Big Description Bacon Ipsum.</p>
                <div id="btn-close"><b>X</b></div>
             </div>
             <div id="worksContent">
                 <ul id="themes"> Themes LI</ul>
                 <ul id="creations" class="step">
                     <li class="step frmwk">
                          <div class="item">
                              <a href="#">
                                  <img src="Img/creas/crea.png" alt="title" title="" width="226" height="147"/>
                              </a>
                              <div class="caption">
                                 <h3>Framework Work</h3>
                                 <p>Little description</p>
                              </div>
                           </div>
                      </li>
<!-- Other content -->
</body>

（或者你可以用萤火虫看到它）

我知道我的代码毁了你的眼睛，但目前它更像是一个草稿而不是真正的网站。

那么，你能帮我理解为什么在滑块中显示我的图片有延迟，好吗？

感谢你的时间提前！

Answer 1

尝试将所有幻灯片设置为display:none，如下所示

#sliderContent .slides li {
    display: none;
}

为我修好了。我认为FlexSlider希望隐藏所有幻灯片。你看到的延迟是因为它显示了最后一张幻灯片，但内部步骤通过所有幻灯片，运行动画和所有内容，但你只是看不到它，因为最后一张有更高的z-index并且是可见的。

Answer 2

我有同样恼人的问题。

添加此

style="display: list-item"

到.slides内的第一个列表（li）中的孩子就可以了。

使用Flexslider 2延迟显示

2 个答案: