[英]Orbit doesn't show - zurb foundation V5
Orbit doesn't show. 轨道不显示。 What i have done wrong?
我做错了什么? Note: I didn't change any documentation structure.
注意:我没有更改任何文档结构。 Version 5
版本5
Code in head: 头中的代码:
<script src="js/vendor/modernizr.js"></script>
Code in body: 正文中的代码:
<div class="row">
<div class="orbit-container">
<ul data-orbit class="example-orbit orbit-slides-container">
<li> <img src="http://placehold.it/1000x300/A92B48/fff" alt="slide 1" />
<div class="orbit-caption"> Caption One. </div>
</li>
<li class="active"> <img src="http://placehold.it/1000x300/EE964D/fff" alt="slide 2" />
<div class="orbit-caption"> Caption Two. </div>
</li>
<li> <img src="http://placehold.it/1000x300/FDC43D/fff" alt="slide 3" />
<div class="orbit-caption"> Caption Three. </div>
</li>
</ul>
<!-- Navigation Arrows --> <a href="#" class="orbit-prev">Prev <span></span></a> <a href="#" class="orbit-next">Next <span></span></a> <!-- Slide Numbers -->
<div class="orbit-slide-number"> <span>1</span> of <span>3</span> </div>
<!-- Timer and Play/Pause Button -->
<div class="orbit-timer"> <span></span>
<div class="orbit-progress"></div>
</div>
</div>
<!-- Bullets -->
<ol class="orbit-bullets">
<li data-orbit-slide-number="1"></li>
<li data-orbit-slide-number="2" class="active"></li>
<li data-orbit-slide-number="3"></li>
</ol>
Code before closing body: 关闭主体之前的代码:
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation({
orbit: {
animation: 'slide',
timer_speed: 1000,
pause_on_hover: true,
animation_speed: 500,
navigation_arrows: true,
bullets: false
}
});
</script>
Please help! 请帮忙! can some body provide me with simple working orbit code -----------------------Update----------- i tried this this simple code.. nothing happened
某些机构可以为我提供简单的工作轨道代码-----------------------更新-----------我尝试了这个简单的方法代码..什么都没发生
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
<ul class="example-orbit" data-orbit>
<li> <img src="../assets/img/examples/satelite-orbit.jpg" alt="slide 1" />
<div class="orbit-caption"> Caption One. </div>
</li>
<li> <img src="../assets/img/examples/andromeda-orbit.jpg" alt="slide 2" />
<div class="orbit-caption"> Caption Two. </div>
</li>
<li> <img src="../assets/img/examples/launch-orbit.jpg" alt="slide 3" />
<div class="orbit-caption"> Caption Three. </div>
</li>
</ul>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation({
orbit: {
animation: 'slide',
timer_speed: 1000,
pause_on_hover: true,
animation_speed: 500,
navigation_arrows: true,
bullets: false
}
});
</script>
</body>
</html>
I was having the same issue. 我有同样的问题。 Found the answer here: http://foundation.zurb.com/forum/posts/1635-orbit-inside-of-reveal-modal ...
在这里找到答案: http : //foundation.zurb.com/forum/posts/1635-orbit-inside-of-reveal-modal ...
In your CSS file, specify a minimum height for the class "orbit-container". 在CSS文件中,为“轨道容器”类指定最小高度。
.orbit-container {
min-height: 375px;
height:100%;
}
Tweak to suit your needs, in regards to height of the element, default Background color (Should an image not load) or whatever you want really. 根据元素的高度,默认的背景颜色(是否应加载图像)或您真正想要的内容进行调整以满足您的需求。
EDIT 1: You can also wrap your in a div tag and set your desired height there, the orbit slider should inherit it's height from there. 编辑1:您也可以将其包装在div标记中,并在此处设置所需的高度,轨道滑块应继承那里的高度。
I have my slider set up as follows. 我将滑块设置如下。 I'm using the data-options tag to customize the slider with the options on this page under the "Advanced" header.
我正在使用data-options标记通过此页面上“高级”标题下的选项来自定义滑块。 Using the syntax from the "Real World Example" header right underneath it:
使用其下面的“真实示例”标题中的语法:
<ul data-orbit data-options="pause_on_hover:false;
slide_number: false;
timer: false;
variable_height:true;">
<li><img src="http://placesheen.com/725/500" alt="sheen1"></li>
<li><img src="http://placesheen.com/725/900" alt="sheen2"></li>
<li><img src="http://placesheen.com/725/500" alt="sheen3"></li>
</ul>
If you just want to use all of the default settings, you can just get rid of data-options and set it up as follows: 如果只想使用所有默认设置,则可以删除data-options并按如下所示进行设置:
<ul data-orbit>
<li><img src="http://placesheen.com/725/500" alt="sheen1"></li>
<li><img src="http://placesheen.com/725/900" alt="sheen2"></li>
<li><img src="http://placesheen.com/725/500" alt="sheen3"></li>
</ul>
Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.