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 docs上使用了显示的代码。它只是不起作用。我从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>

Answer 4

James'和Opentuned的答案应该有效（你不应该像你在示例代码中那样添加类似'orbit-container'的类）。

这个plunkr是一个工作示例：http://plnkr.co/r8jfn1

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

Answer 5

我能够通过将modernizr.js包含在我的头部来实现它。

无法在Foundation 5初始化轨道

5 个答案: