0

Twitter Bootstrap を使用して、カルーセルを使用するポートフォリオを構築しています。カルーセル内の特定の要素に移動する方法として、次を使用しています。

<ul id="portfolionav" class="nav nav-pills">
<li class="" id="carousel-ux"><a href="#myCarousel" data-toggle="pill">UX | UI</a></li>
<li class="" id="carousel-vd"><a href="#myCarousel" data-toggle="pill">Visual Design</a></li>
<li class="" id="carousel-web"><a href="#myCarousel" data-toggle="pill">Web</a></li>   
<li class="" id="carousel-mobile"><a href="#myCarousel" data-toggle="pill">Mobile</a></li>
<li class="" id="carousel-corpid"><a href="#myCarousel" data-toggle="pill">Identity</a></li>

私がやろうとしているのは、カルーセル内の特定の要素に到達したときに、LI タグにアクティブなクラスを適用することです。たとえば、カルーセルが要素 #5 にスライドする場合、アクティブなクラスを「モバイル」LI タグに適用し、他の LI タグから削除する必要があります。

誰でもこれを行う方法についてアイデアを教えてもらえますか?

ありがとうございました！

4

1 に答える 1

0

ここで見つけた投稿に基づいて、同様のアイデアをいじっていました：http://forrst.com/posts/Adding_pagination_to_bootstrap_carousel-ULn

ここでの私の実装では、箇条書きではなくスライド タイトルを使用しています。

http://jsfiddle.net/64qK2/

JavaScript を微調整することで、リンクではなく LI アイテムにアクティブなクラスを設定し、ナビゲーション スタイルを追加できます。

/マーク

于 2012-07-20T02:34:50.790 に答える