0

我正在研究我自己的投资组合（现在还不完整），并且我遇到了 Flexslider 2 的问题（由Woothemes 提供）。

请参阅此处：http ://www.gaelle-fernandez.fr/Folio2012/#Works 如果您单击作品（任何图像），将打开一个带有滑块和说明的 slickbox。如您所见，滑块在第一次打开时不显示图像，您必须至少等待 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>

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

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

那么，您能帮我知道为什么我的图像在滑块中的显示会出现延迟吗？

提前感谢您的时间！

4

2 回答 2

2

尝试将所有幻灯片设置为display:none这样

#sliderContent .slides li {
    display: none;
}

那为我修好了。我认为 FlexSlider 希望从一开始就隐藏所有幻灯片。您看到的延迟是因为它显示最后一张幻灯片，但在内部逐步遍历所有幻灯片，运行它们的动画和所有内容，但您只是看不到它，因为最后一张具有更高的 z-index 并且可见。

于 2013-02-28T18:46:54.207 回答
0

我有同样烦人的问题。

添加这个

style="display: list-item"

到第一个列表 (li) 内的子级.slides就可以了。

于 2013-04-10T14:30:40.383 回答