Fullpage.js - 将虚线导航更改为图标集 [英] Fullpage.js - Change Dotted Nav to Icon Set

问题描述

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

I would like to change fullpage.js dotted nav to an icon set. Each icon will represent each section. How can I manage to do that? Cannot find any solution of this.

请提供建议。

谢谢。

推荐答案

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

What about creating your own navigation bar?

使用导航：假。

然后创建自己的导航并使用应用方法 $。fn.fullpage.moveTo 。

Then create you own nav and use apply the method $.fn.fullpage.moveTo in each of the elements.

< a href =http://jsfiddle.net/97tbk/1216/ =nofollow>在线复制

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

我的清单使用 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>

这篇关于Fullpage.js - 将虚线导航更改为图标集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！