Fullpage.js - 将虚线导航更改为图标集答案

【问题标题】：Fullpage.js - Change Dotted Nav to Icon SetFullpage.js - 将虚线导航更改为图标集
【发布时间】：2016-04-20 03:58:38
【问题描述】：

我想将 fullpage.js 点状导航更改为图标集。每个图标将代表每个部分。我怎么能做到这一点？找不到任何解决方案。

请指教。

谢谢。

【问题讨论】：

尝试提供更多细节，说明您尝试过的方法和无效的方法。目前的问题太宽泛了。

标签： icons nav fullpage.js

【解决方案1】：

创建自己的导航栏怎么样？

使用navigation:false。

然后创建您自己的导航，并在每个元素中应用 fullpage_api.moveTo 方法。

Reproduction online

new fullpage('#fullpage', {
    licenseKey: 'YOUR KEY HERE',
    navigation: false,
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    onLeave: function(origin, destination, direction){
        activateNavItem($('#my-nav').find('li').eq(destination.index));
    },
    afterRender: function(){
        activateNavItem($('#my-nav').find('li').eq($('.section.active').index()))
    }
});

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

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

我的列表使用font-awesome icons：

<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>

【讨论】：

这就是我一直在寻找的。谢谢@Alvaro
另一个问题，以及如何将第一个导航指向第二部分，因为我打算从第二部分开始导航？
在这里加上另一个数字：$.fn.fullpage.moveTo：使用destination.index() + 2
@Alavro，您能否展示如何使活动项目仅显示在列表中间？意思是当我们点击nav item的时候，selected item会变换到list item中间作为一个active item？