2016-03-24 6 views
0

Ich spiele mit Fullpage.js herum und möchte den eingebauten horizontalen Schieberegler verwenden, der wie ein Charme funktioniert. Was ich vermisse, ist die Möglichkeit, einen Tooltip für jeden aktiven Punkt (und wenn man ihn schwebt) zu zeigen, so wie es im Menü für den vertikalen Bereich der Fall ist.fullpage.js horizontale Schieberegler Punkte mit Tooltips

Ich fand eine kurze Anleitung, um dieses Feature in der folgenden Frage zu kommentieren, Kommentar von jfoutch ganz am Ende: horizontal slider using full page.js. Ich weiß nicht, wie man die jQuery.text() -Methode verwendet oder genauer gesagt, wo genau zu starten ist.

Jede Hilfe wird sehr geschätzt! Vielen Dank!

Antwort

0

Ich habe meine eigene Lösung gefunden, Tooltips auf den horizontalen Sliderpunkten zu realisieren! :)

ich die Bootstrap bin mit tooltip.js Plugin (wie ich bereits diesen Rahmen für das Grid-System verwenden) und erstellt die Slider-Navigation mit der Hand, um Daten-toogle und Titel für die Tooltips gesetzt:

<div class="fp-slidesNav bottom"> 
    <ul> 
     <li><a href="#" class="fp-slide-dots" data-toggle="tooltip" title="Slide 1"><span></span></a></li> 
     <li><a href="#" class="fp-slide-dots" data-toggle="tooltip" title="Slide 2"><span></span></a></li> 
     <li><a href="#" class="fp-slide-dots" data-toggle="tooltip" title="Slide 3"><span></span></a></li> 
    </ul> 
</div> 

Als nächstes müssen Sie die Tooltips initialisieren:

$('.fp-slide-dots').tooltip(); 

Es funktioniert! :)

1

fullpage.js bietet keine Möglichkeit, es zu tun, wie Sie in this open issue sehen können.

Was können Sie tun, ist Ihre eigene Navigation erstellen, indem die Methoden fullpage.js Anwendungen verwendet, wie moveTo und aktivieren oder jede nav Kugel desaktivieren durch Rückrufe wie afterLoad oder sogar die Zustandsklasse mit fp-viewing-X-Y, zur Verfügung stellt fullpagejs.

+0

Könnten Sie bitte weitere Informationen zur Deaktivierung jedes Nav-Bullet des horizontalen Schiebereglers geben? – tschortsch

+0

Fügen Sie einfach die 'active' Klasse für jedes' fp-nav a' Elemente hinzu oder entfernen Sie sie. – Alvaro

Verwandte Themen