初始化后向fullPage.js添加或删除节/幻灯片 [英] Adding or removing sections/slides to fullPage.js after initialization

问题描述

我有一个树状结构的数据库，在我的网站上，我在fullPage.js插件的部分"和幻灯片"中显示其内容时，正沿着这棵树走下去.问题是，当我将新的部分附加到整页元素时，它不能成为插件的一部分.

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，我要这样做: https://github.com/alvarotrigo/fullPage.js/issues/41

Tl;dr, I want to do this: https://github.com/alvarotrigo/fullPage.js/issues/41

推荐答案

如您发布的链接中所述，fullpage.js并不提供直接的方法.唯一的方法是每次添加新的部分或幻灯片时破坏并初始化fullpage.js. 为避免闪烁，我们可以记住活动区域并滑动以使用这些值再次初始化.

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.

在线复制

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

这篇关于初始化后向fullPage.js添加或删除节/幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！