12 枚のスライドを含むページからポップアップするブートストラップ カルーセル (スライドショー) があります。このページには、カルーセルのスライドを参照する 12 個のアイコンがあります。
アイテム 1 のメイン ページをクリックして、ポップアップが開いたときにアイテム 1 をアクティブにするにはどうすればよいですか?
メインページのサンプルコードは次のとおりです。
<div id="dialog"> </div>
[ <a href="#mythDialog" data-toggle="modal">Test Link</a> ] [ <a href="#mythDialog" data-toggle="modal">Test Link 2</a> ] [ <a href="#mythDialog" data-toggle="modal">Test Link 3</a> ]
<div id="mythDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Cool work for you</h3>
</div>
<div class="modal-body">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items --->
<div class="carousel-inner">
<div class="active item">
<img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg" />
<p>1111 Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
</div>
<div class="item">
<img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg" />
<p>2222 Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
</div>
<div class="item">
<img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg" />
<p>3333 Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
</div>
</div>
<!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<!-- row -->
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div><!-- modal-body -->
</div> <!-- mythMainDiv -->
こちらをご覧ください [リンク] ( http://jsfiddle.net/barnamah/VCwPE/12/ )