Full height slider skip one slide

Question

I am using fullPage.js to create a full width and height slider for several fullscreen-slides. So my site structure is like

section#f01
section#f02
section#f03.scrollfix
section#f04

I want to skip section#f03.scrollfix while scrolling through the site. While scrolling with my keyboard and/or by my mouse wheel.

Answer 1

Demo online

If you want to remove it on load, then use the afterRender callback as I'm doing here:

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],

    afterRender: function () {
        removeSection2();
    }
});

function removeSection2() {
    // Move section 2 after the las section
    $('.fp-section:last').after($('#f02'));

    //removing the internal class `fp-section` so fullPage.js won't recognise it and won't be able to scroll to it.
    $('#f02').removeClass('fp-section');
}

In case you want to use it at any other moment, just call the function removeSection2 whenever you want.

If you want to restore it back at some point, you could use this other function:

function restoreSection2() {
    // Move all next sections to before the active section
    $('#f01').after($('#f02'));
    $('#f02').addClass('fp-section');
}