Foundation Orbit不会初始化
[英]Foundation Orbit doesn't initialize
问题描述
I'm working with Foundation 4 framework. 
我正在使用Foundation 4框架。 I've been trying to include the Orbit slide into my website, but I can't seem to get it to work. 我一直试图将Orbit幻灯片纳入我的网站，但我似乎无法让它工作。
So I followed the steps in Foundation documentation . 所以我按照基金会文档中的步骤操作。 I've included all necessary scripts 我已经包含了所有必要的脚本
<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>
Then I tried to add a simple slideshow 然后我尝试添加一个简单的幻灯片
<ul data-orbit>
<li>
Test1
</li>
<li>
Test2
</li>
<li>
Test3
</li>
</ul>
But, instead of generating a slideshow all I get is an unnumbered list. 但是，我得到的不是生成幻灯片，而是一个未编号的列表。 I triple checked to make sure I didn't misspell anything. 我三重检查，以确保我没有拼错任何东西。 Here 's an example of what I get. 这是我得到的一个例子。
4 个解决方案
解决方案1
4 已采纳 2013-04-10 20:51:39
In my expirience Foundation's scrips are a little messy, so try to do the following: 在我的到期中，基金会的文章有点乱，所以尽量做到以下几点：
- place modernizr inside the
<head>将modernizr放在<head> reference the following js at the end of your
<body>just before the</body>tag :参考下面的JS在你的端部<body>正好之前</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>
That way you load Zepto in modern browsers, and jquery in the old ones, then you load Foundation, and then you tell the document to grab the format. 这样你在现代浏览器中加载Zepto，在旧版本中加载jquery，然后加载Foundation，然后告诉文档获取格式。 There's no need to load the orbit js, as it is inside the min version of Foundation. 没有必要加载轨道js，因为它在最小版本的Foundation中。
The code is documented at http://foundation.zurb.com/docs/javascript.html 该代码记录在http://foundation.zurb.com/docs/javascript.html
解决方案2
0 2013-08-10 17:57:47
I also had this problem. 我也有这个问题。
The the prot fix that ezabaw used worked for me. 该ezabaw所用的PROT修复为我工作。
The orbit.js is required for this feature. 此功能需要orbit.js。
TCasa TCasa
解决方案3
0 2013-08-14 11:00:28
Dan and TCasa are right. 丹和TCasa是对的。 Do not forget foundation.orbit.js . 别忘了foundation.orbit.js 。 It's essential. 这很重要。
So put this just before the </body> end tag: 所以把它放在</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>
Make sure the paths are right too. 确保路径也正确。 I used Foundation in combination with Compass so my paths were : js/foundation/foundation.js and js/foundation/foundation.orbit.js. 我将Foundation与Compass结合使用，所以我的路径是：js / foundation / foundation.js和js / foundation / foundation.orbit.js。
Good luck 祝好运
解决方案4
0 2014-01-19 14:16:45
There is an easier way. 有一种更简单的方法。 The Slider needs to be initalized after the page is fully loaded. 在页面完全加载后，滑块需要初始化。
For me, after following all aforementioned steps in other answers the following worked 对我来说，在完成其他答案中的所有上述步骤后，以下工作
<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>
The additional custom options can be found here Link to Foundation Docs 可以在此处找到其他自定义选项链接到Foundation Docs
A working example is here (helped me solving this issue) 一个工作的例子在这里 （帮助我解决了这个问题）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.