Fullpage.js: How To Add Css Class "active" To Slide Anchor

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

Solution 1:

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 2if (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

Solution 2:

.fp-viewing-1ul#menuli: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.