Adding or removing sections/slides to fullPage.js after initialization
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();
});
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).
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