图像和幻灯片标题之间的 Flexslider 方向导航

Question

我得到了一个幻灯片布局，它在图片上方显示说明文字。我想显示标题和图像之间的方向导航，如您在屏幕截图中所见。无法正常工作 (see this fiddle) - 我认为这是因为导航位于幻灯片本身的标记内。有人可以告诉我如何完成此布局吗？

<div id="page">
  <div id="main-slider" class="flexslider">
    <ul class="slides">
      <li>
        <figcaption>
          <h1>Ausstellungsansicht</h1>
          <br />
          <br />
          <br />
        </figcaption>
        <div class="slideshow-controls">
        </div>
        <figure>
          <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
        </figure>
      </li>
      <li>
        <figcaption>
          <h1>Test</h1>
          <p>
            UV-Druck auf Pappwabenplatte, Edelstahl
            <br /> Unikat, Zertifikat
          </p>
        </figcaption>
        <div class="slideshow-controls">

        </div>
        <figure>
          <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
        </figure>
      </li>
    </ul>
  </div>
</div>

Answer 1

在滑块的就绪事件中，您可以强制 css 标签属性 margin-top: 30 or 40px;

并使用它们的 class 名称为下一个和上一个箭头提供顶部。 top:50px;

图像和幻灯片标题之间的 Flexslider 方向导航

Flexslsider direction nav between image and caption of slides

javascript

css

jquery

flexslider