javascript - 使用 fullpage.js 的水平 slider

Question

我尝试使用 fullpage.js 创建整页水平 slider 插入。我只使用一个部分和 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>

Javascript:

$.fn.fullpage();

CSS

body{
    color: #fff;
}
h1{
    font-size:3em;
}
.section {
    text-align: center;
}

#section0{
    background: -webkit-gradient(linear, top left, bottom left, from(#4bbfc3), to(#7baabe));
    background: -webkit-linear-gradient(#4BBFC3, #7BAABE);
    background: linear-gradient(#4BBFC3,#7BAABE);
}
#header{
        position:fixed;
        height: 50px;
        display:block;
        width: 100%;
        background: #333;
        z-index:9;
        text-align:center;
        color: #f2f2f2;
        padding: 20px 0 0 0;
    }

    #header{
        top:0px;
    }

这是 jsfiddle

谢谢!

Answer 1

下载插件的最新版本 (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>

然后这样初始化:

$('#fullpage').fullpage();

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

为了创建链接，不要使用 toSlide，如果您使用 anchor ，请使用普通的 URL 链接。 (例如/#section/slide，例如:http://alvarotrigo.com/fullPage/#secondPage/2)

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