使用fullpage.js的水平滑块 [英] Horizontal slider using fullpage.js

问题描述

我尝试使用 fullpage.js 插件来创建整页水平滑块。我只使用一个带有3张幻灯片的部分。

I tried to create a full page horizontal slider by using fullpage.js plugin. I use only one section with 3 slides.

我试图在页面顶部的幻灯片中添加固定导航，因此用户可以从顶部导航直接打开幻灯片，但它不工作。任何人都可以帮助我如何使它工作？

I tried to add a fixed navigation to slides in the top of page, so user can open the slides directly from the top navigation, but it doesn't work. Can anyone help me how to make it works?

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

谢谢！

推荐答案

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

Download the last version of the plugin (2.0.7) and use the new HTML markup which uses a wrapper for the plugin:

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

然后以这种方式初始化：

Then initialize it this way:

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

然后创建一个固定的元素只是把它放在外面的插件包装器， a href =http://alvarotrigo.com/fullPage/examples/fixedHeaders.html =nofollow> live example sourcecode。

And then to create a fixed element just put it outside the plugin wrapper like you can see in this live example sourcecode.

在为了创建链接，不要使用 toSlide ，如果使用锚点，请使用正常的URL链接。 （例如/＃section / slide，例如： http://alvarotrigo.com/fullPage/#secondPage / 2 ）

In order to create the links, don't use toSlide, use a normal URL link in case you are using anchors. (such as /#section/slide, for example: http://alvarotrigo.com/fullPage/#secondPage/2)

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

If you don't want to update your fullpage version for whatever reason, just use the option fixedElements as detailed in the documentation.

这篇关于使用fullpage.js的水平滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！