軌道不顯示 - zurb基礎V5

軌道不顯示。我做錯了什麼？注意：我沒有更改任何文檔結構。在頭5版軌道不顯示 - zurb基礎V5

代碼：

<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>

來源

2014-02-11 Yamona

您是否在網頁瀏覽器的控制檯中看到任何腳本錯誤？ –

沒有。我也上傳了這裏的文件http://goo.gl/s15195 – Yamona

我試過這個簡單的代碼..什麼都沒有發生 – Yamona

我有同樣的問題。在這裏找到答案：http://foundation.zurb.com/forum/posts/1635-orbit-inside-of-reveal-modal ...

在您的CSS文件中，指定類「orbit-container」的最小高度。

.orbit-container { 
    min-height: 375px; 
    height:100%; 
}

調整，以滿足您的需求，在問候元素，默認的背景顏色（如果圖像不加載），或任何你想真正的高度。

編輯1：你也可以把你的div標籤包裹起來，在那裏設置你想要的高度，軌道滑塊應該從那裏繼承它的高度。

我有我的滑塊設置如下。我正在使用數據選項標籤自定義帶有「高級」標題下的this page選項的滑塊。使用從「真實的例子」標頭中的語法正下方寫着：

<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>

如果你只是想使用所有的默認設置，你可以擺脫數據選項，並將其設置如下：

<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>

希望這有助於！

來源

2014-02-17 07:34:28

軌道不顯示 - zurb基礎V5

回答

相關問題