fullpage.js - 用于控制幻灯片并保持固定在相同位置的导航元素

Question

CONTEXT

我想要一系列控制幻灯片的图像（即moveTo('section1', 1)等）。但是，我不想将它们放在每张幻灯片上 - 相反，我希望它们始终保持在屏幕上的相同位置，只有背景中的幻灯片在变化。有没有办法实现这个？

Answer 1

您只需要为这些元素添加固定位置。使用CSS：position:fixed。

示例在fullpage.js文件的fixedHeaders.html`文件中提供，is also available online。

Answer 2

很难说出一个没有例子的意思，但试着解释一下：

您将拥有一个包含所有幻灯片的父元素。在此元素中，在此父级＆amp;之外的所有幻灯片 OR 之后在它之后，你将拥有你的“控制”元素。

<slides>
  <slide></slide>
  <slide></slide>
  <slide></slide>
  <!-- ..etc.. -->
</slides>
<controls>
  <control goToSlide(1) />
  <control goToSlide(2) />
  <control goToSlide(3) />
</controls>

...然后您可以position: absolute使用controls和（可能）使用z-index将它们放置在幻灯片上方。