4

我正在使用 Foundation 4 框架。我一直试图将 Orbit 幻灯片包含到我的网站中,但我似乎无法让它工作。

所以我按照Foundation 文档中的步骤进行操作。我已经包含了所有必要的脚本

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

但是,我得到的不是生成幻灯片,而是一个未编号的列表。我三次检查以确保我没有拼错任何东西。是我得到的一个例子。

4

4 回答 4

4

根据我的经验,基金会的脚本有点乱,所以尝试执行以下操作:

  1. 将modernizr放在里面 <head>
  2. 在标签<body>之前的末尾引用以下js :</body>

    <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

于 2013-04-10T20:51:39.867 回答
0

我也有这个问题。

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

此功能需要 orbit.js。

卡萨

于 2013-08-10T17:57:47.090 回答
0

丹和 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。

祝你好运

于 2013-08-14T11:00:28.583 回答
0

有一个更简单的方法。Slider 需要在页面完全加载后初始化。

对我来说,在其他答案中遵循所有上述步骤之后,以下工作

<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

一个工作示例在这里(帮助我解决了这个问题)

于 2014-01-19T14:16:45.800 回答