Question

我尝试使用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>

使用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，如果您使用锚点，请使用普通的URL链接。（例如/ #section / slide，例如：http://alvarotrigo.com/fullPage/#secondPage/2）

如果您不想因任何原因更新整版页面，请使用文档中详述的fixedElements选项。

Answer 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>

不要忘记将活动类提供给第一个锚点。

注意，如果你想设置position：fixed;在你外面的导航上你可能想要调整你的z-index（我设置了z-index：1000;对于换行，但你可以随意做）

对于.js我只使用了FullPage.js已经出现的内容

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

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

当然，您可以将FullPage给定导航，但这样可以完全控制标记。

使用fullpage.js的水平滑块

2 个答案: