Display delayed with Flexslider 2

StackOverflow https://stackoverflow.com/questions/13804905

Question

I'm working on my own portfolio (which is not complete now), and i'm having issues with Flexslider 2 (by Woothemes).

See here : http://www.gaelle-fernandez.fr/Folio2012/#Works If you click on a work (any image), a slickbox will open, with a slider and a description. As you can see, the slider does not show the images at first opening, you have to wait 10seconds at least. It's embarassing, because I want to show my works without any delay...

here is my code of 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>

(or you can see it with firebug)

I know my code is ruining your eyes, but for the moment it is more a draft than a real website.

So, could you help me to know why there is a delay for the display of my images within the slider, please?

Thanks by advance for your time!

Was it helpful?

Solution 2

I had the same annoying issue.

Adding this

style="display: list-item"

to the first list (li) child within .slides will do the trick.

OTHER TIPS

Try setting all slides to display:none like this

#sliderContent .slides li {
    display: none;
}

That fixed it for me. I think FlexSlider wants all slides to be hidden to begin with. The delay you see is because it displays the last slide, but internally steps trough all slides, running their animations and everything, but you just don't see it because the last one has higher z-index and is visible.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top