Orbit 不显示 - zurb Foundation V5答案

【问题标题】：Orbit doesn't show - zurb foundation V5Orbit 不显示 - zurb Foundation V5
【发布时间】：2014-02-11 21:29:52
【问题描述】：

Orbit 不显示。我做错了什么？注意：我没有更改任何文档结构。第 5 版

头部代码：

<script src="js/vendor/modernizr.js"></script>

正文中的代码：

<div class="row">
<div class="orbit-container">
    <ul data-orbit class="example-orbit orbit-slides-container">
        <li> <img src="http://placehold.it/1000x300/A92B48/fff" alt="slide 1" />
            <div class="orbit-caption"> Caption One. </div>
        </li>
        <li class="active"> <img src="http://placehold.it/1000x300/EE964D/fff" alt="slide 2" />
            <div class="orbit-caption"> Caption Two. </div>
        </li>
        <li> <img src="http://placehold.it/1000x300/FDC43D/fff" alt="slide 3" />
            <div class="orbit-caption"> Caption Three. </div>
        </li>
    </ul>
    <!-- Navigation Arrows --> <a href="#" class="orbit-prev">Prev <span></span></a> <a href="#" class="orbit-next">Next <span></span></a> <!-- Slide Numbers -->
    <div class="orbit-slide-number"> <span>1</span> of <span>3</span> </div>
    <!-- Timer and Play/Pause Button -->
    <div class="orbit-timer"> <span></span>
        <div class="orbit-progress"></div>
    </div>
</div>
<!-- Bullets -->
<ol class="orbit-bullets">
    <li data-orbit-slide-number="1"></li>
    <li data-orbit-slide-number="2" class="active"></li>
    <li data-orbit-slide-number="3"></li>
</ol>

关闭正文前的代码：

<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.min.js"></script> 
<script>
      $(document).foundation({
  orbit: {
    animation: 'slide',
    timer_speed: 1000,
    pause_on_hover: true,
    animation_speed: 500,
    navigation_arrows: true,
    bullets: false
  }
});
    </script>

请帮忙！有人可以为我提供简单的工作轨道代码吗 - - - - - - - - - - - -更新 - - - - - - 我试过这个简单的代码..什么也没发生

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
    <ul class="example-orbit" data-orbit>
        <li> <img src="../assets/img/examples/satelite-orbit.jpg" alt="slide 1" />
            <div class="orbit-caption"> Caption One. </div>
        </li>
        <li> <img src="../assets/img/examples/andromeda-orbit.jpg" alt="slide 2" />
            <div class="orbit-caption"> Caption Two. </div>
        </li>
        <li> <img src="../assets/img/examples/launch-orbit.jpg" alt="slide 3" />
            <div class="orbit-caption"> Caption Three. </div>
        </li>
    </ul>
</div>
<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.min.js"></script> 
<script>
      $(document).foundation({
  orbit: {
    animation: 'slide',
    timer_speed: 1000,
    pause_on_hover: true,
    animation_speed: 500,
    navigation_arrows: true,
    bullets: false
  }
});
    </script>
</body>
</html>

【问题讨论】：

您是否在 Web 浏览器的控制台中收到任何脚本错误？
没有。我也在这里上传了文件goo.gl/s15195
我试过这个简单的代码..什么也没发生

标签： javascript jquery zurb-foundation orbit

【解决方案1】：

我遇到了同样的问题。在这里找到答案：http://foundation.zurb.com/forum/posts/1635-orbit-inside-of-reveal-modal...

在您的 CSS 文件中，指定“轨道容器”类的最小高度。

.orbit-container {
    min-height: 375px;
    height:100%;
}

根据您的需要进行调整，包括元素的高度、默认背景颜色（如果不加载图像）或您真正想要的任何内容。

编辑 1：您还可以将您的 div 标签包装并在那里设置您想要的高度，轨道滑块应该从那里继承它的高度。

我的滑块设置如下。我正在使用 data-options 标记来自定义滑块，其中包含“高级”标题下 this page 上的选项。使用其下方“真实世界示例”标题中的语法：

<ul data-orbit data-options="pause_on_hover:false;
                             slide_number: false;
                             timer: false;
                             variable_height:true;">
   <li><img src="http://placesheen.com/725/500" alt="sheen1"></li>
   <li><img src="http://placesheen.com/725/900" alt="sheen2"></li>
   <li><img src="http://placesheen.com/725/500" alt="sheen3"></li>
</ul>

如果你只想使用所有默认设置，你可以去掉 data-options 并设置如下：

<ul data-orbit>
  <li><img src="http://placesheen.com/725/500" alt="sheen1"></li>
  <li><img src="http://placesheen.com/725/900" alt="sheen2"></li>
  <li><img src="http://placesheen.com/725/500" alt="sheen3"></li>
</ul>

希望这会有所帮助！

【讨论】：