基金会（3）轨道图像滑块

Question

我已用于图像滑块在地基3.

<div class="row"> 
    <div class="twelve columns"> 
     <div id="slider"> 
       <img src="http://placehold.it/1600x375&text=[img 1]" /> 
       <img src="http://placehold.it/1600x375&text=[img 2]" /> 
     </div> 
    </div> 
</div> 

然后将以下代码，在我有以下JS文件的，以便在结束了它的工作。

<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').orbit(); 
}); </script> 

当我加载页面一段时间后，两幅图像都会叠加到Orbit Slider中。 我真的希望尽量减少这种情况，并且在加载滑块之前不会出现图像。我有一个非常快速的VPS设置，这样的事情从来没有真正成为一个问题。那可能吗？

Answer 1

一种方法是用JavaScript来改变的document.ready函数内部<div id="slider"></div>的知名度可见：

$(function() { 
    $('#slider').toggle(); 
    $('#slider').orbit(); 
}); 

当然，这意味着你必须以指定display是CSS文件中none：

#slider { 
    display: none; 
} 

Answer 2

只需添加到<div id="slider"></div>高度和溢出：隐藏

#slider { 
height: 300px; 
overflow: hidden; 

}