Fullpage.js - Gepunktete Nav zu Icon Set ändern

Question

Ich möchte Fullpage.js gepunktet Nav zu einem Icon-Set ändern. Jedes Symbol repräsentiert jeden Abschnitt. Wie kann ich das schaffen? Kann keine Lösung dafür finden.

Bitte beraten.

Danke.

Answer 1

Wie wäre es mit der Erstellung einer eigenen Navigationsleiste?

Verwenden Sie navigation:false.

Dann erstellen Sie Ihr eigenes Nav und verwenden Sie die Methode $.fn.fullpage.moveTo in jedem der Elemente.

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

Mit meiner Liste mit 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>