CODEWITHSUNDEEP
jqueryfullpage.js
Sat
Sat

Reputation: 170

Add class to non-active sections in FullPage.js

For those of you who are familiar with fullpage.js, I'm wondering if you've been able to add classes to non-active sections. Specifically I'm wondering if there's a way to add different classes to sections that come before and after the current active section.

For example, it'd be nice to be able to add the class 'before-current' on all sections before the current slide, and 'after-current' for all others, and add/remove classes as you go through all the sections.

Upvotes: 2

Views: 1750

Answers (1)

Milton Filho
Milton Filho

Reputation: 525

You can use afterLoad event

$('#fullpage').fullpage({
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
    menu: '#menu',
    scrollingSpeed: 1000,
    afterLoad: function(anchorLink, index){
            $(".section").removeClass("prev-section").removeClass("next-section");
            $(this).prev(".section").addClass("prev-section");
            $(this).next(".section").addClass("next-section");
        }
    });
});

Upvotes: 3

Related Questions