Fullpage.js: How to add css class “active” to slid

Question

I added the "active" class to my entries of a menu so highlight which section is currently selected. Is it possible to add this also for slides?

Version: 2.6.4

Answer 1

.fp-viewing-1 ul#menu li:nth-child(1) a

This is relatively simple with css:

1. Get the current body class: i.e. fp-viewing and whatever it shows
2. Add the nth child where you want to display active in your menu.

Answer 2

You should be using fullPage.js slides callbacks to do so, for example:

$('#fullpage').fullpage({    
    afterLoad: function (anchorLink, index) {
        //section 2 loaded
        if (index == 2) {
            //adding active class to the 1st element in the slide menu
            $('#myMenu').find('li').eq(0).addClass('active');
        }
    },

    //
    afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {

        //only for slides in section 2
        if (index == 2) {
            $('#myMenu').find('li.active').removeClass('active');
            $('#myMenu').find('li').eq(slideIndex).addClass('active');
        }
    }
});

Demo online

Or, if you prefer, the class fullPage.js adds to the body element of your site which is of the kind fp-viewing-sectionAnchor-slideAnchor. See this video.

body.fp-viewing-1-0 #myMenu .first{
    background: yellow;
}

Demo online