Foundation 6 orbit 失效解决方案

先甩解决方法，就是 motion-ui 没有正确引入。

解决方法有两种。

• 不用动画
• 正确引入 css 和 js 文件

不用动画

追加 data-orbit data-use-m-u-i="false" 属性

<div class="orbit" role="region" aria-label="说明"
    data-orbit data-use-m-u-i="false"> <!-- 这里 -->
</div>

不用动画自然就不会因为动画问题卡住

正确引入 motion-ui

motion-ui 的 js 文件 可以在 foundation 之前使用 async 模式载入，记得引入 css 文件
我用的是 npm 安装的包，引入方法为

require("motion-ui/dist/motion-ui.min.css")
window.MotionUI = require("motion-ui");

正确引入后还不行就看看是不是 html 结构有问题了

我在写自己项目的主页时发现一个问题，因为我是用 foundation 6 写页面的，所以我直接复制了官网文档上幻灯片控件的代码下来。

结果控件在切换下一页时会背景透明并且重叠在上一页上。这里我发现没有在 .orbit-controls 之前包一层 .orbit-wrapper 导致的

正确的结构是这样的

<div class="orbit" role="region" aria-label="说明" data-orbit data-use-m-u-i="false">
    <div class="orbit-wrapper">
        <div class="orbit-controls">
        </div>
    </div>
</div>

接着就是切换到下一页时成功了，但是也卡住了，不能回去，也不能继续。
这里我发现是追加了几个 motion-ui 相关的类，于是就推断是动画库的问题。于是我载入了这个库。并且由于我使用 webpack 打包的，愣是忘了要引入 css 文件，只引入了 js 文件，害我 debug 了几小时才发现是样式没引入 :(