html - Foundation Orbit 图像 slider 无法正常工作？

Question

好的，所以我正在尝试使用 Foundations Orbit 媒体容器。我更擅长 HTML/CSS，但几乎没有 JS 经验。但!要找到一个自动播放的 CSS/HTML 图像 slider 是……不可能的。或者贵。无论如何，我正在尝试使用 Foundation Docs 页面上的 Orbit one，但我想我搞砸了。谁能帮我？以下是代码片段:

HTML

  <div class="row">
      <div class="large-12 columns">
        <div class="panel">
    <div class="orbit-container">       
    <ul>
  <li>
    <img src="assets/infinity.png" alt="slide 1" />
  </li>
  <li class="active">
    <img src="assets/Image1.png" alt="slide 2" />
  </li>
  <li>
    <img src="assets/image2.png" alt="slide 3" />
  </li>
</ul>   

这是 CSS。这不是完整的 CSS，但我很确定我将 Orbit HTML 识别错了。我焦躁的头脑现在无法理解它。

/* Orbit Graceful Loading */
.slideshow-wrapper {
  position: relative; }
  .slideshow-wrapper ul {
    list-style-type: none;
    margin: 0; }
    .slideshow-wrapper ul li,
    .slideshow-wrapper ul li .orbit-caption {
      display: none; }
    .slideshow-wrapper ul li:first-child {
      display: block; }
  .slideshow-wrapper .orbit-container {
    background-color: transparent; }
    .slideshow-wrapper .orbit-container li {
      display: block; }
      .slideshow-wrapper .orbit-container li .orbit-caption {
        display: block; }
    .slideshow-wrapper .orbit-container .orbit-bullets li {
      display: inline-block; }
  .slideshow-wrapper .preloader {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    border: solid 3px;
    border-color: #555555 white;
    border-radius: 1000px;
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; }

.orbit-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  background: none; }
  .orbit-container .orbit-slides-container {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    -webkit-transform: translateZ(0); }
    .orbit-container .orbit-slides-container img {
      display: block;
      max-width: 100%; }
    .orbit-container .orbit-slides-container > * {
      position: absolute;
      top: 0;
      width: 100%;
      margin-left: 100%; }
      .orbit-container .orbit-slides-container > *:first-child {
        margin-left: 0%; }
      .orbit-container .orbit-slides-container > * .orbit-caption {
        position: absolute;
        bottom: 0;
        background-color: rgba(51, 51, 51, 0.8);
        color: white;
        width: 100%;
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem; }

我将所有 JS 文件放入我的 HTML 文件中，因为它告诉我...我不确定从这里去哪里。

Answer 1

看来您缺少初始化轨道脚本所必需的“数据轨道”元素。

<ul data-orbit></ul>

很难说这是否是唯一没有可用示例的问题，但这将是最明显的起点。

Zurb 有关于设置的有用文档。 http://foundation.zurb.com/docs/components/orbit.html

如基金会文档中所述，orbit 已被弃用；但是它仍然可以在较新的版本中使用。

Slick carousel 的设置非常简单，如果您想尝试其他图像 slider ，则可以免费使用。

http://kenwheeler.github.io/slick/

希望这对您有所帮助。