Foundation Orbit不會初始化

Question

我正在使用Foundation 4框架。 我一直試圖將Orbit幻燈片納入我的網站，但我似乎無法讓它工作。

所以我按照基金會文檔中的步驟操作。 我已經包含了所有必要的腳本

<script type="text/javascript" src="js/vendor/custom.modernizr.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/foundation/foundation.orbit.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
       $(document).foundation();
</script>

然后我嘗試添加一個簡單的幻燈片

<ul data-orbit>
       <li>
              Test1
       </li>
       <li>
              Test2
       </li>
       <li>
              Test3
       </li>
</ul>

但是，我得到的不是生成幻燈片，而是一個未編號的列表。 我三重檢查，以確保我沒有拼錯任何東西。 這是我得到的一個例子。

Answer 1

在我的到期中，基金會的文章有點亂，所以盡量做到以下幾點：

將modernizr放在<head>

參考下面的JS在你的端部<body>正好之前</body>標記：

 <script> document.write('<script src=' + ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + '.js><\\/script>') </script> <script src="js/foundation.min.js"></script> <script> $(document).foundation(); </script>

這樣你在現代瀏覽器中加載Zepto，在舊版本中加載jquery，然后加載Foundation，然后告訴文檔獲取格式。 沒有必要加載軌道js，因為它在最小版本的Foundation中。

該代碼記錄在http://foundation.zurb.com/docs/javascript.html

Answer 2

我也有這個問題。

該ezabaw所用的PROT修復為我工作。

此功能需要orbit.js。

TCasa

Answer 3

丹和TCasa是對的。 別忘了foundation.orbit.js 。 這很重要。

所以把它放在</body>結束標記之前：

<script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
</script>
<script src="js/foundation.js"></script>
<script src="js/foundation.orbit.js"></script>   // <-- Don't forget this one
<script>
    $(document).foundation();
</script>

確保路徑也正確。 我將Foundation與Compass結合使用，所以我的路徑是：js / foundation / foundation.js和js / foundation / foundation.orbit.js。

祝好運

Answer 4

有一種更簡單的方法。 在頁面完全加載后，滑塊需要初始化。

對我來說，在完成其他答案中的所有上述步驟后，以下工作

<script>
    $(document).ready(function() {   $(document).foundation(
    //add custom options to orbit
     'orbit', {
     animation: 'slide',
     timer_speed: 1000,
     pause_on_hover: true,
     animation_speed: 500,
     navigation_arrows: true,
     bullets: true


    );});
</script>

可以在此處找到其他自定義選項鏈接到Foundation Docs

一個工作的例子在這里（幫助我解決了這個問題）

Foundation Orbit不會初始化

問題描述

4 個解決方案

解決方案1
4 已采納 2013-04-10 20:51:39

解決方案2
0 2013-08-10 17:57:47

解決方案3
0 2013-08-14 11:00:28

解決方案4
0 2014-01-19 14:16:45

Foundation Orbit不會初始化

問題描述

4 個解決方案

解決方案1 4 已采納 2013-04-10 20:51:39

解決方案2 0 2013-08-10 17:57:47

解決方案3 0 2013-08-14 11:00:28

解決方案4 0 2014-01-19 14:16:45

解決方案1
4 已采納 2013-04-10 20:51:39

解決方案2
0 2013-08-10 17:57:47

解決方案3
0 2013-08-14 11:00:28

解決方案4
0 2014-01-19 14:16:45