Horizontal slider using fullpage.js

Question

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

Here's the jsfiddle

Thank you!

Answer 1

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();

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

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)

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

Answer 2

I know the topic is already 2 years old yet I faced the very same problem today and stumbled upon this article. Now that I´ve found a solution I thought it would be nice to share it with you guys!

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

Don´t forget to give the active class to the first anchor.

Note that if you want to set position:fixed; on the navigation outside you probably want to adjust your z-index (I set the z-index:1000; for the the wrap but do as you like)

And for .js I just used what already comes along with the FullPage.js

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

Now our navigation anchors have an active class depending on the current slide though I´m not sure if the href targets are best practise yet it works.

Of course you could just initalize the FullPage given navigation but this gives you full control over the markup.