Fullpage.js navbar active on slides not sections

Question

Hi everyone just started learning Fullpage.js here and i was wondering if i can let's say divide my page into 3 sections 1 for header 1 for section and 1 for footer. Then set 4-5 sliders in the Section part. what i want is for the navbar to highlight only the current slider in that section not all 4-5 of them at once... like so:

Then when i go to the sections it does this:

and the last section:

how do i make it only active on the current slider and not all of them? Thank you in advance ^^

Answer 1

I would recommend you to make use of the fullPage.js state classes for that. Probably the easiest way.

Using the fp-viewing-x-y class added to the body should be quite easy. For example:

.fp-viewing-home-0 #menu li:nth-child(1){
    background:red;
}
.fp-viewing-home-1 #menu li:nth-child(2){
    background:red;
}
.fp-viewing-home-2 #menu li:nth-child(3){
    background:red;
}

Reproduction online

If you prefer to use jQuery or JavaScript, you can make use of fullpage.js callbacks such as onLeave. See another of my answers and the example online.