无法让 Orbit Carousel 在 Foundation 6.2.0 中工作

Question

我一生都在努力让基本的 Orbit 旋转木马工作，但它就是没有发生。谁能看到我哪里出错了？我尝试了各种替代方法并查看了文档，但一无所获：

代码如下：

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

Answer 1

在 foundation.css css 导入后 <head> 添加：

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

或使用您自己下载的 motion-ui 样式 sheet 副本。

来源：

我在 Github 上发现了一个帖子，其中提到需要包含议案 UI CSS：

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

在 Foundation 6 Motion UI 文档中，我发现提到 Motion UI CSS 对于 Orbit、Toggler 和 Reveal 组件中的过渡是必要的：

Foundation 6 Motion UI doc

在 Motion UI 文档中有 link 到 cdn：

Foundation 6 Motion UI Installation

无法让 Orbit Carousel 在 Foundation 6.2.0 中工作

Can't get Orbit Carousel to work in Foundation 6.2.0

orbit

zurb-foundation-6