0

私は自分のポートフォリオに取り組んでいます (現在は完全ではありません)。Flexslider 2 (by 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>

（またはfirebugで見ることができます）

私のコードがあなたの目を台無しにしていることは承知していますが、現時点では、実際の Web サイトというよりは下書きです。

では、スライダー内の画像の表示に遅延がある理由を教えていただけませんか?

お時間をいただきありがとうございます。

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 に答える