Fullpage.js - ドット付きのナビゲーションをアイコンセットに変更

Question

フルパージド点滅のアイコンをアイコンセットに変更したいと思います。各アイコンは各セクションを表します。それをどうすればできますか？ これの解決策が見つかりません。

お知らせください。

ありがとうございました。

Answer 1

独自のナビゲーションバーを作成するとどうなりますか？

navigation:falseを使用してください。

次に、独自のナビゲーションを作成し、それぞれの要素にメソッド$.fn.fullpage.moveToを適用します。 font-awesome iconsを使用して

私のリストで

Reproduction online

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