问

无法在Foundation 5初始化轨道

mobiledu2502910233 发布于 2023-02-09 10:39

bit

http

html

ide

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

我已经尝试了一切,似乎没有任何工作.我检查了他们的支持页面(http://foundation.zurb.com/docs/components/orbit.html)并尝试了那里描述的每个选项.还是行不通...

任何人都可以看看我的代码并告诉我我做错了什么？谢谢!

这就是代码现在的样子.如上所述,我已经尝试直接编辑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等...到目前为止没有任何工作!我也试着打电话给头部而且没用.

任何人都可以请你放松一下吗？提前致谢!

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

2023-02-09 10:42 回答

手机用户2602923951

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签