Javascript Can'；T在基础5上初始化轨道 我在基金会5号网站上工作了一整天。一切都很顺利，直到我决定使用基金会的轨道制作一个图像滑块

我已经尝试了所有的方法，但似乎没有任何效果。我查看了他们的支持页面（）并尝试了其中描述的每个选项。仍然不工作

谁能看看我的代码，告诉我我做错了什么？谢谢

<div class="row">
        <div class="large-9 columns logoone">
            <!-- slider --> 
            <ul class="orbit-container">
              <li> 
                <img src="images/1.JPG" alt="whatever" />
              </li>
              <li>
                <img src="images/2.jpg" alt="whatever" />
              </li>
              <li>
                <img src="images/3.JPG" alt="whatever" />
              </li>
            </ul>
            <!-- slider --> 
        </div>
        <div class="large-3 columns logoone">
            <img src="images/logo.jpg" alt="whatever" title="whatever">
            <br><br>
        </div>
      </div>

<script src="js/jquery.js"></script>
    <script src="js/foundation.min.js">
        $(document).foundation({
          orbit: {
            animation: 'slide',
            timer_speed: 1000,
            pause_on_hover: true,
            animation_speed: 500,
            navigation_arrows: true,
            bullets: false,
            next_on_click: true
          }
        });
    </script>

    <script src="js/foundation/foundation.orbit.js">    </script>

在保险商实验室等等。。。到目前为止什么都没用！我也试着打电话给他，但没有成功

---

有人能帮我放松一下吗？提前谢谢

您需要将

数据轨道

属性添加到

ul

元素。

“您只需将

元素添加到页面。”

看起来你需要在你的ul课程末尾添加“数据轨道”

<ul class="example-orbit" data-orbit>

James'和Opentuned的答案应该有效（您不需要像示例代码中显示的那样添加“orbit container”之类的类）

此plunkr是一个工作示例：

---

我认为问题可能源于加载顺序和脚本链接的位置。

很抱歉打开了一篇旧文章，但我遇到了同样的问题，并解决了它

我还使用了在基础.ZUB.com文档上显示的代码。它就是不起作用。 当我从

中删除

类

属性并使用

数据轨道

时，它就开始工作了

之后，我注意到在这个示例中，它们显示了prev和next按钮以及项目符号的html。您不需要将其放入代码中。它是冗余的，会干扰生成的控件

长话短说，我的滑块最终是这样的：

<div class="row">
    <div class="large-12">
        <ul data-orbit>
            <li>
                <img src="http://lorempixel.com/1200/1200" alt="slide 1">
                <div class="orbit-caption">
                    Caption 1
                </div>
            </li>
            <li>
                <img src="http://lorempixel.com/1200/800" alt="slide 2">
                <div class="orbit-caption">
                    Caption 2
                </div>
            </li>
            <li>
                <img src="http://lorempixel.com/800/1200" alt="slide 3">
                <div class="orbit-caption">
                    Caption 3
                </div>
            </li>
        </ul>
    </div>
</div>

标题1


标题2


标题3

---

所以请注意：您的

上没有类，这似乎是解决方案。至少在我的情况下是这样的。

我能够通过在我的头部部分中包含它来让它工作

再说一次，就像我说的，我已经做了他们在支持页面上说的一切，所以我已经试过了。。。还有其他建议吗？如果你查看基金会自己的模板（），你会发现他们使用的代码与他们教的完全不同！仍然无法理解…而且，就像我说的，我已经做了他们在支持页面上说的一切，所以我已经尝试过了。。。还有其他建议吗？如果你查看基金会自己的模板（），你会发现他们使用的代码与他们教的完全不同！还没弄明白…可能吧。下次我会记住你的答案，但现在我用另一个图像滑块解决了这个问题（我知道这很愚蠢，但它很快就解决了我的问题！）。。。遗憾的是，基金会的文件是如此混乱和糟糕。。。谢谢你的帮助，非常感谢！没什么好道歉的！几天后我得出了同样的结论，实际上我忘了把它贴在这里。。。我不明白他们怎么会在样本上贴错代码。。。谢谢你的反馈！

<div class="row">
    <div class="large-12">
        <ul data-orbit>
            <li>
                <img src="http://lorempixel.com/1200/1200" alt="slide 1">
                <div class="orbit-caption">
                    Caption 1
                </div>
            </li>
            <li>
                <img src="http://lorempixel.com/1200/800" alt="slide 2">
                <div class="orbit-caption">
                    Caption 2
                </div>
            </li>
            <li>
                <img src="http://lorempixel.com/800/1200" alt="slide 3">
                <div class="orbit-caption">
                    Caption 3
                </div>
            </li>
        </ul>
    </div>
</div>