我正在尝试使用Bootstrap轮播和Modal创建一个简单的灯箱。请take a look at sample file which I have here。
我想做的是将Modal Carousel作为主旋转木马的同一幻灯片(当前幻灯片)启动。正如您从示例中看到的,当我启动Modal时,它只是从第一个项目开始,但我需要从当前活动幻灯片开始。
你能告诉我怎么做吗?
<div class="container">
<div class="well span9 columns">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href=".bell" data-toggle="modal"><img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt=""/></a>
</div>
<div class="item">
<img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt=""/>
</div>
<div class="item">
<img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt=""/>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!-- Modal -->
<div id="bell" class="modal hide fade bell" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<div id="myCarousel2" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt=""/>
</div>
<div class="item">
<img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt=""/>
</div>
<div class="item">
<img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt=""/>
</div>
</div>
<a class="left carousel-control" href="#myCarousel2" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel2" data-slide="next">›</a>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-inverse"><a href=".bell" data-toggle="modal"><i class="icon-resize-full icon-white"></i></a>
</button>
</div>
</div>
Thansk
答案 0 :(得分:1)
这似乎有效。
$('.bell').on('show', function() {
var targetSlide = parseInt($('#myCarousel .active').index('#myCarousel .item'));
$('#myCarousel2').carousel(targetSlide);
});
这会在主旋转木马上显示当前索引。
$('#myCarousel .active').index('#myCarousel .item')
设置模态轮播的当前幻灯片。
$('#myCarousel2').carousel(/*Number here*/);
Here is a jsFillde上面的代码。