fullpage.js - Get the active Section Index number

Question

The is pretty straightforward. I'm trying to find a way to get the active section Index number. I want the number to change when you scroll to a different section.

What I want to achieve: Demo

Answer 1

Make use of fullPage.js callbacks or state classes.

Notice you have the slideIndex on the callbacks:

afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
    //do whatever here
    $(body).append(slideIndex);
}, 

Because the afterSlideLoad callback won't get fired on section change, you'll need to also make use of the afterLoad callback and get the slide number by using the state classes added by fullPage.js:

afterLoad: function(anchorLink, index){
    var slideNumber = $('.fp-section.active').find('.fp-slide.active').index() + 1
 //do whatever here
    $(body).append(slideNumber);
}