【问题标题】:Can't get Orbit Carousel to work in Foundation 6.2.0无法让 Orbit Carousel 在 Foundation 6.2.0 中工作
【发布时间】:2016-03-10 16:07:56
【问题描述】:

我一生都在努力让基本的 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>

【问题讨论】:

  • 如果从网站上复制粘贴示例会怎样?
  • 网站上没有“真实世界”的例子。事实上,Foundation 6 的大部分文档都缺乏展示实际实现的能力。这是不幸的。 foundation.zurb.com/sites/docs/orbit.html

标签: orbit zurb-foundation-6


【解决方案1】:

&lt;head&gt; 中添加foundation.css css 导入后:

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

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


学分:

我在 Github 上发现了一个帖子,提到需要包含 Motion 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 文档中有指向 cdn 的链接:

Foundation 6 Motion UI Installation

【讨论】:

  • 哦,这到底是怎么回事,您必须包含另一个库中未包含的 CSS 文件?!它在文档中只说“支持 Motion UI”,没有提到“哦,顺便说一句,你需要安装这个”foundation.zurb.com/sites/docs/motion-ui.html#installing
  • 即使没有涵盖所有内容;我将我所有的 sass(包括供应商库)包含在我的 main.scss 文件中。仅包含 motion-ui.scss 文件是不够的,您还需要包含两个主要的 mixin 以加载整个 CSS:@include motion-ui-transitions; @include motion-ui-animations; 希望这可以节省其他人一些时间。 github.com/zurb/motion-ui/blob/master/docs/installation.md
猜你喜欢
  • 2013-09-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多