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)，这似乎是解决方案。至少在我的情况下是这样。