Fullpage.js: How to automatically add the name of the next or previous section

Question

A question about the Fullpage plugin: http://alvarotrigo.com/fullPage/

I was wondering if I could automatically add the name of the next or previous section to a button, based on the current section where you are.

I couldn't find it here: http://alvarotrigo.com/fullPage/examples/callbacks.html

I already made an unhandy manual solution, but there might be a better automatic solution (a function or something like that) for which some more Javascript knowledge is needed than I have.

This is my (temporarily) solution, assuming that my section names are homepage, chairs, arm chairs and stools.

afterLoad: function(anchorLink, index){
                if(index == 1){
            $('#moveSectionUp').html('stools');
            $('#moveSectionDown').html('chairs');
                }
                if(index == 2){
            $('#moveSectionUp').html('homepage');
            $('#moveSectionDown').html('arm chairs');
                }

and so on...

Any ideas are welcome!

Answer 1

Use this:

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    afterLoad: function(anchorLink, index) {
        var loadedSection = $(this);   
        var prev = loadedSection.prev();
        var next = loadedSection.next();

        var prevText = (prev.length) ? prev.attr('data-arrow-text') : '';

        var nextText = (next.length) ? next.attr('data-arrow-text') : '';

        console.log(nextText);

        $('#moveSectionUp').html(prevText);
        $('#moveSectionDown').html(nextText);
    }
});

And use the attribute data-arrow-text in each section to define the text you want to show for the arrow to move to that section:

<div class="section" data-arrow-text="Demo"></div>

Online demo