0

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

谢谢！

4

2 回答 2

4

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

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

为了创建链接，不要使用toSlide，使用普通的 URL 链接，以防您使用锚点。（如/#section/slide，例如：http ://alvarotrigo.com/fullPage/#secondPage/2 ）

如果您出于某种原因不想更新整页版本，只需使用fixedElements文档中详述的选项即可。

于 2014-05-02T13:22:46.337 回答
1

我知道这个话题已经 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>

不要忘记将活动课程分配给第一个主播。

请注意，如果要设置位置：固定；在外面的导航上你可能想调整你的 z-index （我设置了 z-index:1000; 为 wrap 但你喜欢做）

对于 .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 给定的导航，但这可以让您完全控制标记。

于 2016-06-22T12:12:05.917 回答