Adding or removing sections/slides to fullPage.js after initialization

Question

I have a tree-structured database and in my website I am going down the tree as I show their content in \"sections\" and \"slides\" of fullPage.js plugin. The problem is, wh

Answer 1

I needed to do something similar but with a little more flexibility. And it was important to enable sections above, without moving the contents of the current page.

I just started using FullPage.js so I did not try any problems with other plugin features. But I share the result here.

It's a little complicated, but it does what I need! Examples at the end...

I had to modify 2 lines of FullPage.js plugin:

function moveSectionUp(){
        var prev = $(SECTION_ACTIVE_SEL).prevAll(SECTION_SEL + ':first');  // <--- THIS
        // var prev = $(SECTION_ACTIVE_SEL).prev(SECTION_SEL); // <--- INSTEAD OF THIS

And

function moveSectionDown(){
        var next = $(SECTION_ACTIVE_SEL).nextAll(SECTION_SEL + ':first');  // <--- THIS
        //var next = $(SECTION_ACTIVE_SEL).next(SECTION_SEL);  // <--- INSTEAD OF THIS

And these are the functions added:

fpInitSkipEl = function(funcSkipEl) {

    if ($.isFunction(funcSkipEl)) {
        var nextIndex = 0;
        $('.section').each(function() {
            nextIndex++;
            $('a[href="#' + $(this).attr('data-anchor') + '"]').on('click', function() {
                var dataAnchor = $(this).attr('href').toString().replace('#', '');
                return funcSkipEl($('.section').index($('.section.active')) + 1, $('.section').index($('.section[data-anchor="' + dataAnchor + '"]')) + 1);
            });
        });
    }

}

fpSkipEl = function(anchorsToSkip, index, nextIndex) {
    //debugger;
    $('.section').each(function() {
        if (anchorsToSkip.indexOf($(this).attr('data-anchor')) > -1
            && (index==-1 || $(this).attr('data-anchor') != $('.section').eq(index - 1).attr('data-anchor'))
            && (nextIndex==-1 || $(this).attr('data-anchor') != $('.section').eq(nextIndex - 1).attr('data-anchor'))) {

            $(this).css('display', 'none').removeClass('fp-section');
        } else {

            $(this).css('display', '').addClass('fp-section');
        }
        $.fn.fullpage.reBuild();
    });

}


fpGetRealIndex = function(index) {
    var realIndex = 0;
    $('.section').each(function() {
        realIndex++;
        if ($(this).hasClass('fp-section')) index--;
        if (index == 0) return false;
    });
    return realIndex;
}

The main use is this:

fpInitSkipEl(function(index, nextIndex) { 
    // Fire on anchor Click
    // You can play with index (the current section) and nextIndex (the next section)

    if (index==1 && nextIndex==4) {
        fpSkipEl(['page2', 'page3'], index, nextIndex);

    }
});

And init and set your logic on afterLoad

$('#fullpage').fullpage({
    anchors: ['page1', 'page2', 'page3', 'page4'],
    afterLoad: function(anchorLink, index) {
            // Get the real index with the hidden sections, oterwise index is relative to the visible sections.
            var realIndex = fpGetRealIndex(index);

            fpSkipEl([], -1, -1); // Show all sections
        }
    });

The simple working example on JSFiddle

A more complex example on JSFiddle

Answer 2

As said in the link you post, fullpage.js doesn't provide a direct way of doing it. The only way is destroying and initializing fullpage.js each time you add a new section or slide. To avoid blinkings, we can remember the active section and slide to initialize again with those values.

Reproduction online

init();

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

//adding a section dynamically
$('button').click(function(){
    $('#fullpage').append('<div class="section">New section</div>');

    //remembering the active section / slide
    var activeSectionIndex = $('.fp-section.active').index();
    var activeSlideIndex = $('.fp-section.active').find('.slide.active').index();

    $.fn.fullpage.destroy('all');

    //setting the active section as before
    $('.section').eq(activeSectionIndex).addClass('active');

    //were we in a slide? Adding the active state again
    if(activeSlideIndex > -1){
        $('.section.active').find('.slide').eq(activeSlideIndex).addClass('active');
    }

    init();
});

Answer 3

For anyone trying this in 2020 the $.fn.fullpage.destroy("all") method didn't work for me I had to use fullpage_api.destroy("all") instead.

Answer 4

Thanks, Alvaro! I also want to include my approach in order to remove sections and slides.

To remove the active section at the bottom and go to upper section:

$('#fullpage').on('click', 'button#removeSection', function() {
    var section = $('.fp-section.active');
    $.fn.fullpage.moveSectionUp();
    setTimeout(function(){
        section.remove();
    }, 700);
});

To remove the last slide and go to the slide on the left:

$('#fullpage').on('click', 'button#removeSlide', function() {
    var slide = $('.fp-section.active').find('.slide.active');
    $.fn.fullpage.moveSlideLeft();
    setTimeout(function(){
        slide.remove();
    }, 700);
});

700ms is the default animation time. We should wait for the animation time to pass, in order to not to see the section/slide as it is being removed (what we observe as blink).