Fullpage.js - 新的幻灯片导航栏

Question

我有下一个代码（从here 中提取），用于为效果很好的部分创建一个新的导航栏：

JSFIDDLE

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    onLeave: function(index, nextIndex, direction){
        activateNavItem($('#my-nav').find('li').eq(nextIndex-1));
    },
    afterRender: function(){
        activateNavItem($('#my-nav').find('li').eq($('.section.active').index()))
    }
});

$('.fa-bell').click(function(){
    var destination = $(this).closest('li');
    $.fn.fullpage.moveTo(destination.index() + 1 );
});

function activateNavItem(item){
    item.addClass('active').siblings().removeClass('active');
}

使用字体很棒的图标：

<ul id="my-nav">
    <li><i class="fa fa-bell" aria-hidden="true"></i></li>
    <li><i class="fa fa-bell" aria-hidden="true"></i></li>
    <li><i class="fa fa-bell" aria-hidden="true"></i></li>
    <li><i class="fa fa-bell" aria-hidden="true"></i></li>
</ul>

我的问题是，除了水平“幻灯片”而不是“部分”，是否有办法做同样的事情？

谢谢你

Answer 1

当然！只需为此使用幻灯片回调，例如：

• onSlideLeave
• afterSlideLoad

并应用相同的逻辑。