0

Orbit には弾丸ナビゲーション システムが組み込まれています。これらの箇条書きを使用してスライド間を移動する代わりに、ページのナビゲーション メニューのアイテムを使用して同じことをしたいと考えています。箇条書きの一連の div を基本的に置き換える洗練された方法で、div の 1 つをクリックすると、Orbit が適切なスライドにスクロールするようになりますか? 独自のコンテンツ スライダーを作成する方が賢明でしょうか? アドバイスをよろしくお願いします。

4

3 に答える 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 に答える