2012-02-10 19 views
11

Non sono sicuro del motivo per cui il plug-in si comporta in questo modo ma ogni volta che aggiorno la pagina con il plug-in Carousel, il div contenente è vuoto per 5 secondi, quindi il carosello inizierà a funzionare normalmente- -Sliding through.Twitter Bootstrap Ritardo del plug-in Carousel sul caricamento della pagina

Ho creato una versione ridotta per vedere se c'erano altre cose che ostacolavano le cose. Ecco quello che ho:

<html> 
    <head> 

     <link rel="stylesheet" href="bootstrap.min.css" type="text/css"> 
     <link rel="stylesheet" href="css/carousel.css" type="text/css"> 

     <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script> 

     <script type="text/javascript" src="scripts/bootstrap-transition.js"></script> 
     <script type="text/javascript" src="scripts/bootstrap-carousel.js"></script> 

     <script type="text/javascript"> 
      $(function() { 
       $('#myJumbotron').carousel(); 
      }); 

     </script> 

    </head> 

    <body> 

     <!-- JUMBOTRON 
===================================================================== --> 
     <div class="container"> 
      <div class="row"> 
       <section class="span16"> 

        <div id="myJumbotron" class="carousel"> 
         <div class="carousel-inner"> 

          <div class="item"> 
           <img src="images/jumbotron.jpg" alt="Featured specials" /> 
          </div> 

          <div class="item"> 
           <img src="http://placehold.it/940x380" alt="Featured specials" /> 
          </div> 

          <div class="item"> 
           <img src="images/jumbotron.jpg" alt="Featured specials" /> 
          </div> 

         </div> 
         <a class="left carousel-control" href="#myJumbotron" data-slide="prev">&lsaquo;</a> 
         <a class="right carousel-control" href="#myJumbotron" data-slide="next">&rsaquo;</a> 
        </div> 

       </section> 
      </div> 
     </div> 

    </body> 

</html> 

ho usato lo strumento SimpLESS per compilare solo il file carousel.less al proprio file carousel.css e il bootstrap.min.css non è stato modificato pure.

È possibile vedere cosa succede quando si va qui: furnitureroadshow.com. Qualsiasi aiuto su questo sarebbe molto apprezzato.

risposta

31

aggiungi per la prima classe articolo "attiva" in html, ora stai aspettando 1 ciclo.

EX:

     <div class="item active"> 
          <img src="images/jumbotron.jpg" alt="Featured specials" /> 
         </div> 

         <div class="item"> 
          <img src="http://placehold.it/940x380" alt="Featured specials" /> 
         </div> 
...... 
+3

Grazie. Cose come questa vengono trascurate dopo 10 ore di programmazione. LOL. – generalopinion

Problemi correlati