javascript - Fullpage.js:如何自动添加下一个或上一个部分的名称

Question

一个关于Fullpage插件的问题: http://alvarotrigo.com/fullPage/

我想知道是否可以根据您所在的当前部分自动将下一个或上一个部分的名称添加到按钮。

我在这里找不到它: http://alvarotrigo.com/fullPage/examples/callbacks.html

我已经做了一个笨拙的手动解决方案，但可能有一个更好的自动解决方案(一个函数或类似的东西)，为此需要比我更多的 Javascript 知识。

这是我的(临时)解决方案，假设我的部分名称是主页、椅子、扶手椅和凳子。

afterLoad: function(anchorLink, index){
                if(index == 1){
            $('#moveSectionUp').html('stools');
            $('#moveSectionDown').html('chairs');
                }
                if(index == 2){
            $('#moveSectionUp').html('homepage');
            $('#moveSectionDown').html('arm chairs');
                }

等等……

欢迎任何想法!

Answer 1

使用这个:

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    afterLoad: function(anchorLink, index) {
        var loadedSection = $(this);   
        var prev = loadedSection.prev();
        var next = loadedSection.next();

        var prevText = (prev.length) ? prev.attr('data-arrow-text') : '';

        var nextText = (next.length) ? next.attr('data-arrow-text') : '';

        console.log(nextText);

        $('#moveSectionUp').html(prevText);
        $('#moveSectionDown').html(nextText);
    }
});

并在每个部分中使用属性 data-arrow-text 来定义要为移动到该部分的箭头显示的文本:

<div class="section" data-arrow-text="Demo"></div>

Online demo