旋轉木馬不會加載無窗調整

我這裏有一個演示 - http://www.ttmt.org.uk/carousel/index.html 旋轉木馬不會加載無窗調整

而且這裏的jsfiddle - http://jsfiddle.net/Lsug7/

我使用caroufredsel轉盤 - http://caroufredsel.dev7studios.com

我的問題是傳送帶多申加載正確，直到窗口調整大小

有沒有人知道這是爲什麼。

<!DOCTYPE html> 
    <html lang="en"> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 

     <!--jQuery--> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
     <script type="text/javascript" language="javascript" src="js/jquery.carouFredSel.js"></script> 

     <!--css--> 

     <style type="text/css"> 
     *{ 
      margin:0; 
      padding:0; 
     } 
     .carousel img{ 
      max-width:900px; 
      height:auto; 
     } 

     @media only screen and (max-width:800px){ 
      .carousel img{ 
      max-width:700px; 
      height:auto; 
      } 
     } 
     @media only screen and (max-width:500px){ 
      .carousel img{ 
      max-width:400px; 
      height:auto; 
      } 
     } 
     @media only screen and (max-width:400px){ 
      .carousel img{ 
      max-width:300px; 
      height:auto; 
      } 
     } 

     </style> 


     <!--[if lt IE 9]> 
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 

     <title>Title of the document</title> 
     </head> 

    <body> 

     <section > 
      <div class="carousel"> 
      <img src="images/slide-show-1.jpg" /> 
      <img src="images/slide-show-2.jpg" /> 
      <img src="images/slide-show-3.jpg" /> 
      <img src="images/slide-show-4.jpg" /> 
     </div> 

     </section> 


     <script type="text/javascript" language="javascript"> 
     $(document).ready(function(){ 
      $('.carousel').carouFredSel({ 
       width: '100%', 
       items: { 
        visible: 3, 
        start: -1 
       }, 
       scroll: { 
        items: 1, 
        duration: 1000, 
        timeoutDuration: 3000 
       }, 

      }); 
     }); 
     </script>  

    </body> 

    </html

來源

2013-10-16 ttmt

我今天遇到了類似的問題，發現你可以通過給圖像的父類添加一個高度並將其設置爲重要快速修復。看完檢查員之後，我發現其中一個父類在裝載時的默認高度爲0像素，而不是通過任何方式實現的最佳實踐，只是一個合適的bandaid。

.carousel { 
     max-width:900px; 
     height:400px !important; 
    }

來源

2013-12-12 04:33:02 user2865446

旋轉木馬不會加載無窗調整

回答

相關問題