無法獲得Orbit Carousel在基金會工作6.2.0

我一直在試圖讓我的生活得到一個基本的Orbit旋轉木馬工作，但它只是沒有發生。任何人都可以看到我要去哪裏嗎？我已經試過各種替代方案，有一個看文件，但我還是一無所獲：無法獲得Orbit Carousel在基金會工作6.2.0

代碼如下：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css" />

或：

<!doctype html> 
<html class="no-js" lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Orbit Test</title> 
    <link rel="stylesheet" href="css/foundation.css" /> 
    <link rel="stylesheet" href="css/app.css" /> 
    </head> 
    <body> 
    <div class="row"> 
     <div class="large-12 columns"> 
      <ul data-orbit> 
      <li> 
       <div> 
       <p><strong>This is item 1.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
       </div> 
      </li> 
      <li> 
       <div> 
       <p><strong>This is item 2.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
       </div> 
      </li> 
      <li> 
       <div> 
       <p><strong>This is item 3.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
       </div> 
      </li> 
      <li> 
       <div> 
       <p><strong>This is item 4.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
       </div> 
      </li> 
      </ul> 
     </div> 
     </div> 
    <script src="js/vendor/jquery.min.js"></script> 
    <script src="js/foundation.min.js"></script> 
    <script>$(document).foundation();</script> 
    </body> 
</html>

來源

2016-03-10 Jack of all Trades

如果你複製和粘貼從網站的例子嗎？ – Yass

網站上沒有「真實世界」的例子。實際上，大多數Foundation 6文檔都缺乏顯示實際實現的內容。這是不幸的。 http://foundation.zurb.com/sites/docs/orbit.html –

在<head>添加您的foundation.css CSS導入後請使用您自己下載的motion-ui樣式表副本。

信用：

我發現在Github上一個線程提到的運動UI CSS需要包括：

[F 6.0.4] Orbit don't work correctly #7264

在基金會6運動UI醫生，我找到了提及Motion UI CSS是Orbit，Toggler和Reveal組件轉換所必需的：

Foundation 6 Motion UI doc

和向下運動UI文檔有鏈接到CDN：

Foundation 6 Motion UI Installation

來源

2016-04-01 15:41:55

哦，到底什麼，你必須包括另一個未包含在庫中的CSS文件？！它在文檔中說的是它「支持動態用戶界面」，沒有提到「順便說一句，你需要安裝這個」http://foundation.zurb.com/sites/docs/motion-ui.html#安裝 – igneosaur

即使這並沒有涵蓋所有;我將我所有的sass（包括供應商庫）都包含在我的'main.scss'文件中。只包含'motion-ui.scss'文件是不夠的，你還需要爲整個CSS加入兩個主要的混音：'@include motion-ui-transitions';'@include motion-ui-animations ;'希望這可以節省別人一些時間。 https://github.com/zurb/motion-ui/blob/master/docs/installation.md – igneosaur

無法獲得Orbit Carousel在基金會工作6.2.0

回答

相關問題