Fullpage.js: 如何自动添加下一节或上一节的名称

Question

一个关于全页插件的问题： 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

Answer 2

关于直接放在Alvaros解决方案下的评论：

问题 = 如何使 Alvaros 上述解决方案适用于连续滚动页面（使用插件选项 continuousVertical）？

答案 = 非常简单，只需稍微修改 Alvaros 解决方案中的代码即可。这里有一个解释：

将以下行末尾的最后一个 '' 分别替换为最后一节和第一节的节名：

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

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

假设在这种情况下，最后一节的名称是'Arm Chairs'，第一节的名称是'Homepage'，则变成：

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

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

就是这样！

但是，还假设您识字地按照 Alvaro 上面的建议进行操作：

"And use the attribute data-arrow-text in each section"

Fullpage.js: 如何自动添加下一节或上一节的名称

Fullpage.js: How to automatically add the name of the next or previous section

javascript

jquery

sections

fullpage.js