Question

我正在使用Foundation 4框架。我一直试图将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是我得到的一个例子。

Answer 1

在我的实践中，基金会的文章有点乱，所以尽量做到以下几点：

将modernizr置于<head>

在<body>标记之前的</body>末尾引用以下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>

这样你在现代浏览器中加载Zepto，在旧版本中加载jquery，然后加载Foundation，然后告诉文档获取格式。没有必要加载轨道js，因为它在最小版本的Foundation中。

代码记录在http://foundation.zurb.com/docs/javascript.html

Answer 2

我也有这个问题。

ezabaw使用的 prot 修复对我有用。

此功能需要orbit.js.

TCasa

Answer 3

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>

确保路径也正确。我将Foundation与Compass结合使用，所以我的路径是：js / foundation / foundation.js和js / foundation / foundation.orbit.js。

祝你好运

Answer 4

有一种更简单的方法。在页面完全加载后，滑块需要初始化。

对我来说，在完成其他答案中的所有上述步骤后，以下工作

<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（帮我解决了这个问题）

Foundation Orbit不会初始化

4 个答案: