軌道未顯示-zurb Foundation V5
[英]Orbit doesn't show - zurb foundation V5
問題描述
軌道不顯示。 我做錯了什么？ 注意：我沒有更改任何文檔結構。 版本5
頭中的代碼：
<script src="js/vendor/modernizr.js"></script>
正文中的代碼：
<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>
關閉主體之前的代碼：
<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>
請幫忙！ 某些機構可以為我提供簡單的工作軌道代碼-----------------------更新-----------我嘗試了這個簡單的方法代碼..什么都沒發生
<!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>
1 個解決方案
解決方案1
2 已采納 2014-02-17 07:34:28
我有同樣的問題。 在這里找到答案： http : //foundation.zurb.com/forum/posts/1635-orbit-inside-of-reveal-modal ...
在CSS文件中，為“軌道容器”類指定最小高度。
.orbit-container {
min-height: 375px;
height:100%;
}
根據元素的高度，默認的背景顏色（是否應加載圖像）或您真正想要的內容進行調整以滿足您的需求。
編輯1：您也可以將其包裝在div標記中，並在此處設置所需的高度，軌道滑塊應繼承那里的高度。
我將滑塊設置如下。 我正在使用data-options標記通過此頁面上“高級”標題下的選項來自定義滑塊。 使用其下面的“真實示例”標題中的語法：
<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>
如果只想使用所有默認設置，則可以刪除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>
希望這可以幫助！
Zurb Foundation 6-軌道不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.