Slides.js jQuery插件不加載直接在Chrome或Safari但在Firefox

Question

罰款我使用這個插件：http://slidesjs.com/

當我打開我的網站：http://26splitrockcove.com/在Firefox，這個幻燈片負載和完美的作品，因爲它應該。但是，當我在Chrome或Safari中加載本網站時，它不會顯示任何內容，甚至不會顯示預加載圖像，但它很快會顯示幻燈片，但它總是等待幻燈片中的最後一個（或第三個）圖像，然後當它轉變過渡不是他們應該如何。

現在，真正奇怪的是，只有當您使用重新加載按鈕重新加載頁面時，纔會發生這種情況，但是如果您在Safari和Chrome中單擊url並按回車鍵 - 它完美運行。

這是我的javascript它：

$(function(){ 
     $('.home .slides').slides({ 
      preload: true, 
      preloadImage: 'assets/loading.gif', 
      autoHeight: true, //before I used this, it didn't even show the third image at all 
      play: 5000, 
      slideSpeed: 1000, 
      effect: 'slide', 
      pagination: false, 
      generatePagination: false, 
      pause: 150, 
      hoverPause: true 
     }); 

}); 

Answer 1

我看了一下您的標記，它看起來像你忘記一些div /班。

您的代碼：

<div class="slides"> 
    <div class="slideshow"> 
     <img src="photos/510ad67ebdf9c_thumb.jpg"/> 
     <img src="photos/510ad71697e59_thumb.jpg"/> 
     <img src="photos/510ad697b3734_thumb.jpg"/> 
    </div> 
</div> 

什麼，你應該有：

<div class="slides"> 
    <div class="slides_container"> 
     <div> 
      <img src="photos/510ad67ebdf9c_thumb.jpg"/> 
     </div> 
     <div> 
      <img src="photos/510ad71697e59_thumb.jpg"/> 
     </div> 
     <div> 
      <img src="photos/510ad697b3734_thumb.jpg"/> 
     </div> 
    </div> 
</div> 

幻燈片JS的JavaScript將查找 「slides_container」 分區，然後設置基於它的幻燈片包含div。

來源：slidesjs.com