无法在Foundation 5初始化轨道

Question

我一直在这个基金会制作的网站上工作了一整天.一切顺利,直到我决定使用Foundation的Orbit制作一个图像滑块.

我已经尝试了一切,似乎没有任何工作.我检查了他们的支持页面(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

抱歉打开一个旧帖子,但我正在解决同样的问题,并解决了它.

我还在fou​​ndation.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>,这似乎是解决方案.至少在我的情况下.