在5号基础上无法初始化轨道

Question

我已经在这个网站上工作了一整天。一切都进行得很顺利，直到我决定用基金会的轨道制作一个图像滑块。

我已经什么都试过了，似乎什么都没起作用。我检查了他们的支持页面(http://foundation.zurb.com/docs/components/orbit.html)，并尝试了这里描述的每一个选项。还是不工作..。

有人能看看我的代码然后告诉我我做错了什么吗？谢谢!

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

，这就是现在的代码。，正如解释过的，我已经尝试直接编辑orbit.js文件，将类轨道容器添加到div中，然后添加。

data-options="animation:slide;
                  animation_speed:1000;
                  pause_on_hover:true;
                  animation_speed:500;
                  navigation_arrows:true;
                  bullets:false;
                  next_on_click:true;"

在ul等..。到目前为止什么都没起作用！我也试着打电话到头上，结果没起作用。

，谁能让我放松一下吗？提前谢谢！

Answer 1

对不起，我打开了一个旧邮件，但我在同一个问题上犹豫不决，并解决了这个问题。

我还在foundation.zurb.com文档上使用了显示的代码。只是不起作用。当我从class中删除<ul>属性并使用data-orbit时，它就开始工作了。

在此之后，我注意到在示例中，它们显示了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>

所以请注意:在<ul>上没有类，这似乎是解决方案。至少是在我的案子里。

Answer 2

您需要向data-orbit元素添加一个ul属性。

Answer 3

“唯一需要做的就是向页面添加一个<ul data-orbit></ul>元素。”

看来你需要在ul类的末尾加上“数据轨道”.

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