Orbit には弾丸ナビゲーション システムが組み込まれています。これらの箇条書きを使用してスライド間を移動する代わりに、ページのナビゲーション メニューのアイテムを使用して同じことをしたいと考えています。箇条書きの一連の div を基本的に置き換える洗練された方法で、div の 1 つをクリックすると、Orbit が適切なスライドにスクロールするようになりますか? 独自のコンテンツ スライダーを作成する方が賢明でしょうか? アドバイスをよろしくお願いします。
1673 次
3 に答える
2
私もこれを行う方法を探していました-柔軟性を高めるために、これはおそらくトラックに組み込まれるべきだと思われます。
私は簡単に見て、軌道1.4.0を使用してこのソリューションhttps://github.com/zurb/foundation/issues/118/を微調整しました。
ナビゲーションには好きな構造を使用します。
<div id="custom-orbit-nav">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
次に、ナビゲーション div を jquery にバインドし、軌道関数を使用してスライド インデックスを変更します。これが私の初期化コードです。
$("#featured").orbit();
$("#custom-orbit-nav div").click(function() {
var myIndex = $(this).index();
$(this).addClass("active");
$("#featured").trigger("orbit.stop").trigger("orbit.goto", [myIndex]);
return false;
});
于 2013-02-23T03:10:39.530 に答える
1
Orbitを設定するときは、箇条書きが有効になっていることを確認してください。これは次のようになります。
$(document).ready(function() {
$("#yourOrbitElement").orbit({
bullets: true
});
});
次に、CSSを使用して、箇条書きをvisibility: hidden;
CSSを使用するように設定します。
次に、Orbitをだまして、jqueryを使用して実際に他の何かをクリックしているときに、箇条書きがクリックされたと思い込ませる必要があります.click()
。次のようになります。
$(".yourNavElements").click(function(){ //when you click on your nav element
$("#theAppropriateBullet").click(); //auto-click on the corresponding bullet
});
これを機能させるには、どのナビゲーションボタンがどの弾丸を制御するかを追跡する方法が必要です。data
各ナビゲーションボタンの属性にインデックス番号を保存し:contains()
、一致するインデックスの弾丸をターゲットにしました。
于 2013-02-23T03:02:21.253 に答える