Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
675 views
in Technique[技术] by (71.8m points)

jquery - 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: https://github.com/alvarotrigo/fullPage.js/issues/41

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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();
});

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...