Question

使用Foundation：Orbit Slider时，导航箭头不会将我带到下一张幻灯片，而是每次都返回索引页面。

标记`

<div class="row full-width" id="portfolio">
        <div class="orbit-container">
          <ul data-orbit class="example-orbit orbit-slides-container">
            <li>
              <img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider2.jpg" alt="slide 1" />
              <div class="orbit-caption">
                Caption One.
              </div>
            </li>

            <li class="active">
              <img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider2.jpg" />
              <div class="orbit-caption">
                Caption Two.
              </div>
            </li>

            <li>
              <img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider3.jpg" 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>`

Answer 1

尝试以下方法。删除以下类和行（它们由JS自动添加）：

example-orbit
orbit-slides-container
active
<\ul>

将结束标记添加到<div class="orbit-container">

所以你的代码就是这样：

<div class="row full-width" id="portfolio">
    <div class="orbit-container">
      <ul data-orbit="">
        <li>
          <img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider2.jpg" alt="slide 1" />
          <div class="orbit-caption">
            Caption One.
          </div>
        </li>

        <li>
          <img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider2.jpg" />
          <div class="orbit-caption">
            Caption Two.
          </div>
        </li>

        <li>
          <img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider3.jpg"   alt="slide 3" />
          <div class="orbit-caption">
            Caption Three.
          </div>
        </li>
      </ul>
    </div>
  </div>

将<div class="orbit-container">放入带有class="large-12 columns"的附加div，并在第一张和第二张幻灯片中使用不同的图像也是一个好主意。我没有其他想法。我还花了一些时间来弄清楚Orbit是如何正常工作的。

Foundation Orbit Slider：导航参考索引的箭头

1 个答案: