how to add elements between sections in Fullpage.js

i was trying to add some parallax effect backgrounds between sections in the fullpage.js plugin

code goes something like this

<div class="fallpage">
  <div class="section">content</div>
  <div class="parallex-background"></div>
  <div class="section">content</div>
  <div class="parallex-background"></div>
  <div class="section">content</div>
</div>

everything works fine , and fullpage.js ignores those parallax sections , except for the scrolling part... mouse doesn't work anymore or the keyboard controls , side-dots and menu works fine

if i could just make the plugin ignore these parallax backgrounds between sections with the mouse wheel scrolling and the keyboard controls working , that would be great :)

and sorry for any typos

Update for fullpage.js v4:

fullpage.js version 4 allows to do this. Just use any other element between sections and it will be skipped.

See this demo: https://codepen.io/alvarotrigo/pen/oNroZqX

HTML code:

<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="nothing">Test</div>
    <div class="section">Section 2</div>
    <div class="section">Section 3</div>
</div>

Old anaswer for fullPage.js v3

You can't do that. Fullpagejs will only expect sections between sections.

What you can do instead is playing with fullpage.js options. Use them as sections, use the fp-auto-height class for them so they won't be full screen, and use some callback to force fullpage.js to jump them when you are about to arrive to them:

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    onLeave: function(index, nextIndex, direction){
        var destinationToIgnore = $('.section').eq(nextIndex -1).hasClass('ignore');

        if(destinationToIgnore){
            var destination = (direction === 'down') ? nextIndex + 1 : nextIndex - 1
            $.fn.fullpage.moveTo(destination);
        }
    }
});

I've coded this script in a way that you just need to use the class ignore in your section to force fullpage.js to ignore it, for example:

<div class="section fp-auto-height ignore">
    <div class="parallax">
        PARALLAX
    </div>
</div>

Reproduction online

Now you can give me an up-vote, a hug, a lollipop, or even a donation! :)