響應式圖像滑塊bxslider僅適用於頁面重新加載

我想在我的網站上使用響應式圖像滑塊'bxslider'（bxslider.com）。不幸的是，滑塊的圖像通常不會出現在頁面上，只有控件可見。但是，只要刷新頁面，滑塊的圖像就會重新出現。響應式圖像滑塊bxslider僅適用於頁面重新加載

我已經看過類似的問題在這裏問過，但他給出的建議 - 比如「只使用jQuery 1.x」 - 似乎不適用於我。

如果有人有另一個建議，會很棒！實際的網址是：http://www.lauraniebel.com/casestudy01.htm和http://www.lauraniebel.com/casestudy02.htm這裏是我的代碼：

<script src="js/modernizr-2.8.3.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="js/jquery.bxslider.min.js"></script> 


    <div class="bxslider3">  
      <img src="img/cvnewsletters01.jpg" alt="Curtin Volunteers Newsletters"> 
      <img src="img/cvnewsletters02.jpg" alt="Curtin Volunteers Newsletters"> 
     </div> 

<div class="bxslider">  
      <img src="img/cvinfographic01.jpg" alt="Curtin Volunteers Infographic"> 
      <img src="img/cvinfographic02.jpg" alt="Curtin Volunteers Infographic Closeup"> 
     </div> 

<div class="bxslider2">  
      <img src="img/cvposters01.jpg" alt="Curtin Volunteers Posters"> 
      <img src="img/cvposters02.jpg" alt="Curtin Volunteers Posters"> 
     </div> 


<script> 
     $(document).ready(function(){ 
     $('.bxslider').bxSlider(); 
    }); 

     $(document).ready(function(){ 
     $('.bxslider2').bxSlider(); 
    }); 


    $(document).ready(function(){ 
     $('.bxslider3').bxSlider(); 
    }); 
</script>

來源

2017-01-20 Laura

包裝你圖像的容器內，並給該容器明確的寬度和高度。

或者設置bxslider的圖像已加載之後，可能使用image onload

既然這樣，bxslider正在初始化圖像有足夠的時間來加載之前，計算0的寬度和高度爲他們，從而使他們沒有加載出現。

jsfiddle

我包你的圖片在<div class="container"></div>，因爲明確的寬度/高度。問題是內聯元素（圖像）根據其內容（未加載的圖像）計算寬度/高度，而bxslider使用0寬度/高度來初始化自身。

來源

2017-01-20 16:27:49 Hodrobond

典型的jQuery問題。 JavaScript就像是「你的圖像還沒完成？」發現這個小插件... 檢測用戶在所有影像的SCR

Github link

CDN之前正確地呈現：

<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script>  <script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.js"></script>

來源

2017-01-20 16:48:32

響應式圖像滑塊bxslider僅適用於頁面重新加載

回答

相關問題