将 class 添加到 FullPage.js 中的非活动部分

Question

对于那些熟悉 fullpage.js 的人，我想知道您是否能够将 classes 添加到非活动部分。具体来说，我想知道是否有办法将不同的 classes 添加到当前活动部分之前和之后的部分。

例如，如果能够在当前幻灯片之前的所有部分添加 class 'before-current'，为所有其他部分添加 'after-current'，并且 add/remove class 在您完成所有部分时。

Answer 1

您可以使用 afterLoad 事件

$('#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");
        }
    });
});

将 class 添加到 FullPage.js 中的非活动部分

Add class to non-active sections in FullPage.js

jquery

fullpage.js