[英]Foundation (3) Orbit Image Slider
我有以下代码用于 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 设置,这样的事情从来都不是问题。 那可能吗?
一种方法是在 document.ready 函数中使用 javascript 将<div id="slider"></div>
可见性更改为可见:
$(function() {
$('#slider').toggle();
$('#slider').orbit();
});
这当然意味着您必须在 css 文档中指定display
为none
:
#slider {
display: none;
}
只需添加到<div id="slider"></div>
高度和溢出:隐藏
#slider {
height: 300px;
overflow: hidden;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.