Javascript 使用fullpage.js的水平滑块

我尝试使用插件创建一个完整的页面水平滑块。我只使用一个部分和3张幻灯片

我尝试在页面顶部的幻灯片中添加一个固定的导航，这样用户就可以直接从顶部导航打开幻灯片，但它不起作用。有人能帮我怎么做吗

HTML:

<div id="header">
    <a href="#" class="toSlide" data-index="1">Link to slide 1</a>
    <a href="#" class="toSlide" data-index="2">Link to slide 2</a>
    <a href="#" class="toSlide" data-index="3">Link to slide 3</a>
<div>
<div class="section" id="section0">
    <div class="slide" data-anchor="slide1">
        <h1>Slide 1.js</h1>
       This is slide 1
    </div>

    <div class="slide" data-anchor="slide2">
        <h1>Slide 2</h1>
        this is slide 2
    </div>

    <div class="slide" data-anchor="slide3">
        <h1>Slide 3</h1>
    </div>

</div>

$.fn.fullpage();

CSS

这是我的建议

---

谢谢大家!

下载插件的最新版本（2.0.7）并使用新的HTML标记，该标记使用插件的包装：

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

然后，要创建一个固定元素，只需将它放在插件包装器之外，就像您在这个源代码中看到的那样

为了创建链接，不要使用

toSlide

，如果您使用的是锚，请使用普通的URL链接。（如/#剖面/幻灯片，例如：）

---

如果您不想出于任何原因更新您的完整页面版本，只需使用文档中详述的选项

fixedElements

。

下载插件的最新版本（2.0.7）并使用新的HTML标记，该标记使用插件的包装：

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

然后，要创建一个固定元素，只需将它放在插件包装器之外，就像您在这个源代码中看到的那样

为了创建链接，不要使用

toSlide

，如果您使用的是锚，请使用普通的URL链接。（如/#剖面/幻灯片，例如：）

---

如果您不想出于任何原因更新您的完整页面版本，只需使用文档中详述的选项

fixedements

。

我知道这个主题已经有2年了，但我今天遇到了同样的问题，偶然发现了这篇文章。现在我已经找到了一个解决方案，我想和你们分享它会很好

<div class="wrap">
    <nav class="nav">
        <ul>
            <li><a class="nav__item active" href="#firstPage/slide1">1</a></li>
            <li><a class="nav__item" href="#firstPage/slide2">2</a></li>
            <li><a class="nav__item" href="#firstPage/slide3">3</a></li>
            <li><a class="nav__item" href="#firstPage/slide4">4</a></li>
        </ul>
    </nav>
</div>

<div id="fullpage">
    <div class="section">
      <div class="slide" data-anchor="slide1"></div>
      <div class="slide" data-anchor="slide2"></div>
      <div class="slide" data-anchor="slide3"></div>
      <div class="slide" data-anchor="slide4"></div>
    </div>
</div>

现在，我们的导航锚有一个活动类，具体取决于当前幻灯片 虽然我不确定href目标是否是最佳实践，但它仍然有效

---

当然，您可以在给定导航的情况下初始化整个页面，但这会让您完全控制标记。

我知道这个主题已经有2年了，但今天我遇到了同样的问题，偶然发现了这篇文章。现在我已经找到了一个解决方案，我想和你们分享它会很好

<div class="wrap">
    <nav class="nav">
        <ul>
            <li><a class="nav__item active" href="#firstPage/slide1">1</a></li>
            <li><a class="nav__item" href="#firstPage/slide2">2</a></li>
            <li><a class="nav__item" href="#firstPage/slide3">3</a></li>
            <li><a class="nav__item" href="#firstPage/slide4">4</a></li>
        </ul>
    </nav>
</div>

<div id="fullpage">
    <div class="section">
      <div class="slide" data-anchor="slide1"></div>
      <div class="slide" data-anchor="slide2"></div>
      <div class="slide" data-anchor="slide3"></div>
      <div class="slide" data-anchor="slide4"></div>
    </div>
</div>

现在，我们的导航锚有一个活动类，具体取决于当前幻灯片 虽然我不确定href目标是否是最佳实践，但它仍然有效

---

当然，您可以在给定导航的情况下初始化整个页面，但这会让您完全控制标记。

无法理解您的问题是什么？我已经改进了这个问题。谢谢“不行”不是一个专业术语。什么不起作用？无法理解你的问题是什么？我已经改进了问题。谢谢“不行”不是一个专业术语。什么不起作用？嗨，阿尔瓦罗，谢谢你的回复。我已经按照您的说明更新了代码，但是幻灯片现在不起作用。请看我刚刚找到了如何让它工作。谢谢你给我的线索，阿尔瓦罗。以防万一其他人想这么做，我会分享我是如何做到的。我使用了内置的水平导航点。将选项设置为“顶部”。我使用jQuery text（）方法将我想要的文本添加到导航点锚定中。当相应的幻灯片已经显示时，锚定将获得一个活动类。从那里你只需添加你的自定义CSS，让它们看起来像你想要的，你最终得到一个菜单，看起来就像垂直的，但与滑块工作。嗨阿尔瓦罗，谢谢你的答复。我已经按照您的说明更新了代码，但是幻灯片现在不起作用。请看我刚刚找到了如何让它工作。谢谢你给我的线索，阿尔瓦罗。以防万一其他人想这么做，我会分享我是如何做到的。我使用了内置的水平导航点。将选项设置为“顶部”。我使用jQuery text（）方法将我想要的文本添加到导航点锚定中。当相应的幻灯片已经显示时，锚定将获得一个活动类。从这里开始，只需添加自定义CSS，使它们看起来像您想要的，您最终会得到一个菜单，它看起来像垂直菜单，但与滑块一起工作。

$('#fullpage').fullpage({
    anchors: ['firstPage'],
    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
      $('.nav__item.active').removeClass('active');
      $('.nav__item').eq(slideIndex).addClass('active');
    }
});