2016-03-24 4 views
0

私はfullpage.jsで遊んでいます。魅力的なように機能する内蔵の水平スライダを使用したいと思います。私が欠けているのは、縦のセクションメニューと同じように、アクティブなドットのそれぞれにツールヒントを表示する(そしてそれらをホバリングする)ことです。fullpage.jsツールチップを使用した水平スライダードット

次の質問でこの機能を実現するための簡単なガイドが見つかりました。最後のjfoutchからのコメント:horizontal slider using full page.js。私はjQuery.text()メソッドの使い方を知りません。

ご協力いただきありがとうございます。ありがとう!

答えて

0

私は水平スライダーの点にツールチップを実現する独自のソリューションを見つけました! :)私はブートストラップを使用してい

は、プラグインをtooltip.js(私はすでにグリッドシステムのためのこのフレームワークを使用して)とツールチップのためのデータ・toogleとタイトルを設定するために手でスライダーのナビゲーションを作成:

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

次はツールチップを初期化する必要があります。

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

それは働きます! :)

1

this open issueのように、fullpage.jsで行うことはできません。あなたは何ができるか

は、afterLoadまたは提供fullpagejsさえ状態クラスfp-viewing-X-Yとしてコールバックを使用して、各NAVの弾丸を、このようなmoveToとして、方法fullpage.js用途を使用して、独自のナビゲーションを作成して、有効またはdesactivateです。

+0

水平スライダの各ナビの弾丸を無効にする方法の詳細を教えてください。 – tschortsch

+0

各 'fp-nav a'要素の' active'クラスを追加または削除するだけです。 – Alvaro

関連する問題