0

この問題を解決するために 1 日の大半を費やしましたが、今度は助けを求める必要があります。

サムネイルナビゲーションをクリックすると、親指の大きな画像が表示されるように、修正されたブートストラップカルーセルがあります。親指ナビ

<ul class="carousel-linked-nav" id="front_mktng_list_thumb">
          <li class="active front_mktng_thumbs"><a href="#1"><img class="htttp://link/to.jpg"></a></li>
          <li class="front_mktng_thumbs"><a href="#2"><img class="thumb_mktng_border" src="http://link/to/thumb.jpg"></a></li>
          <li class="front_mktng_thumbs"><a href="#3"><img class="thumb_mktng_border" src="http://link/to/thumb.jpg"></a></li>
          <li class="front_mktng_thumbs"><a href="#4"><img class="thumb_mktng_border" src="http://link/to/thumb.jpg"></a></li>
</ul>

カルーセルに表示される大きな画像は、ユーザーがナビゲーションでクリックした内容に基づいています。

<div id="myCarousel" class="carousel slide carousel-fade">
  <div class="carousel-inner span6 image_mktng_border" id="front_mktng_image" > 
    <div class="active item"><img src="http://link/to/large.jpg"></div>
    <div class="item"><img src="http://link/to/large.jpg"></div>
    <div class="item"><img src="http://link/to/large.jpg"></div>
    <div class="item"><iframe width="630" height="330" src="http://www.youtube.com/embed/xW7AAKjDclQ" frameborder="0" allowfullscreen></iframe></div>
  </div>  
</div>

ここには、リファクタリングする必要があるいくつかのハックがあります (interval は、ユーザーのクリックに基づいて画像が切り替わるようにするための高い数値であり、href には .stopPropagation が使用されないなどです)。

  $('#myCarousel').carousel({
    interval: 444000,
    pause: true
  });

  $('.carousel-linked-nav > li > a').click(function() {
      var item = Number($(this).attr('href').substring(1));
      $('#myCarousel').carousel(item - 1);
      $('.carousel-linked-nav .active').removeClass('active');
      $(this).parent().addClass('active');
      return false;
  });

現在、私が 1 日の大半を費やしているのは、各画像が表示されるたびに説明テキストを表示することです。基本的に画像と同じ方法で表示しますが、カルーセルでは表示せず、同じサムネイル<a>を使用してテキストの表示と非表示を切り替えます。画像を参照してください。

クリック イベントで非表示テキストを表示する方法にはかなり精通していますが、既存のカルーセルで正しく機能させる方法についてはわかりません。

私が取り組んできた思考プロセスは、display: none;表示したい説明テキストを含むクラスと div を追加できるということです。a次に、クリックし たときに追加するクラスをいつでも (条件付きで) そのクラスを簡単に切り替えることができます。

この動作 (複数の div 操作) を許可するには、カルーセルをリファクタリングする必要がありますか? 私の思考プロセス/解決策は間違っていますか?

アドバイスが必要です。ご清聴ありがとうございました。

アップデート

スクリーンショットに反映されていない、表示したいテキスト

<div class="row">
  <div class="offset2">
    <div id="first_description">Quick list everything town</div><br>
    <div id="second_description">View of what's been done, what's next and who we're waiting on.</div><br>
    <div id="third_description">Have people do thing for you without looking like a jerk</div><br>
    <div id="fourth_description">Here's how I muthloving use it</div><br>
  </div>
</div>

ここに画像の説明を入力

ここに画像の説明を入力

4

1 に答える 1

1

Tmacram さん、Twitter のブートストラップのドキュメントが完全に不十分であるために、この問題が難しいと感じたのは驚くことではありません。

slideおよびハンドラに渡されるイベント オブジェクトslidにより、アクティブなアイテムを次の式で決定できます。

$(event.target).find('.carousel-inner .active')

したがって、仲間のアイテム間のインデックス：

$(event.target).find('.carousel-inner .active').index()

したがって、対応するテキストを選択して表示できます。

$('#myCarousel').on('slid', function(event) {
    var idx = $(event.target).find('.carousel-inner .active').index();
    msg($(".row .offset2 div").eq(idx).text());
}).trigger('slid');

ここmsg()で、適切なコンテナにテキストを表示するための関数です。独自の関数を作成する必要があります (まだ作成されていない場合)。

.trigger('slid')最初のスライド アクションの前に、最初のカルーセル アイテムのテキストを表示するために必要です。

DEMO (検索後に見つけたデモのフォークに基づく)。

または、アクティブなテキストを繰り返しコピーするのではなく、テキスト div を直接表示/非表示にすることもできます - DEMO

于 2012-12-16T01:33:39.900 に答える