Foundation Orbit不初始化

我正在使用Foundation 4框架。我一直在試圖將Orbit幻燈片放入我的網站，但似乎無法使其運行。Foundation Orbit不初始化

因此，我遵循Foundation documentation中的步驟。我已經包括了所有必要的腳本

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

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

來源

2013-04-09 ItsGreg

你有沒有解決過這個問題？我遇到了同樣的問題，唯一不同的是我的問題發生在WordPress + Foundation的環境中。 – vtacreative 2013-05-09 18:05:59

我有！答案在於我選擇的答案。我只在標籤中放置了modernizr ** **，而其餘標籤恰好在標籤末尾之前。 – ItsGreg 2013-05-09 18:55:47

在我的expirience基金會的scrips有點凌亂，所以儘量做到以下幾點：在你<body>剛剛</body>之前結束

地方的Modernizr的<head>

參考裏面以下的js標籤：

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

這樣，你加載澤在現代瀏覽器中使用pto，在舊數據庫中使用jquery，然後加載Foundation，然後通知文檔抓取格式。無需加載軌道js，因爲它位於Foundation的最小版本內。

的代碼在http://foundation.zurb.com/docs/javascript.html

來源

2013-04-10 20:51:39 ezabaw

我遵循js的指示，所以我已經做到了。它不工作，這就是爲什麼我還添加了軌道腳本。 – ItsGreg 2013-04-11 06:22:25

嘗試在jquery下面添加zepto js，並且不要忘記在zepto和jquery – ezabaw 2013-04-11 16:47:55

之後調用foundation以及在foundation.min.js之後添加foundation.orbit.js，只有foundation.min.js是不夠的 – dan 2013-04-11 20:43:37

是記錄我也有這個問題。

prot修復ezabaw用於我的工作。

該功能需要orbit.js。

TCasa

來源

2013-08-10 17:57:47 TCasa

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

確保路徑是正確的了。我將基金會與Compass結合使用，因此我的路徑爲：js/foundation/foundation.js和js/foundation/foundation.orbit.js。

祝你好運

來源

2013-08-14 11:00:28

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

對於我來說，下面在其他的答案都完成上述步驟以下工作

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

額外的定製選項，可以在這裏找到Link to Foundation Docs

工作示例是here（幫我解決這個問題）

來源

2014-01-19 14:16:45 itconlor

Foundation Orbit不初始化

回答

相關問題