Question

我在Foundation 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

一种方法是将document {ready函数中的javascript <div id="slider"></div>的可见性更改为可见：

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

这当然意味着您必须在css文档中指定display为none：

#slider {
    display: none;
}

Answer 2

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

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

}

基础（3）轨道图像滑块

2 个答案: