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

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, when I append a new section to a fullpage element, it can not be a part of the plugin.

The reason I trace the tree in that way is, the the distances of the ‘leafs’ from the root might not meet the same.

Tl;dr, I want to do this:


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


function init(){
        sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],

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

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


    //setting the active section as before

    //were we in a slide? Adding the active state again
    if(activeSlideIndex > -1){


Leave a Reply

Your email address will not be published. Required fields are marked *