javascript - 无法初始化 Foundation 5 上的轨道

Question

我在 Foundation 5 上制作的这个网站上工作了一整天。一切都很顺利，直到我决定使用 Foundation 的 Orbit 制作一个图像 slider 。

我已经尝试了所有方法，但似乎没有任何效果。我检查了他们的支持页面( 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 文件，将类 Orbit-container 添加到 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 .

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

所以，长话短说，我的 slider 最终是这样的:

<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> 上没有类(class)，这似乎是解决方案。至少就我而言是这样。