我试图让twitter bootstrap carousel工作,现在一切正常,除了指示灯不能正常工作,当我按下一个箭头指示器直接跳到第三个而不是第二个,当我通过点击prev-arrow返回时,图像完全消失,问题出在哪里?我做错了什么?
在我的情况下,我得到了一个位于滑块顶部的div z-index,用于实现不在其上移动的块的效果。为了更好地理解,请亲自看看:
以下是我的示例:http://jsfiddle.net/jRa5r/2/
这是HTML,请跟随jsfiddle以获取完整示例以及其余代码。
<div id="myCarousel" class="carousel slide"> <!-- slider -->
<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>
<div class="carousel-inner">
<div class="caption-block"></div>
<div class="active item"> <!-- item 1 -->
<img src="img/slider1.jpg" alt="">
<div class="carousel-caption">
<h4>A team with long experience in Domestic and International relationships with key sector decision-makers.</h4>
</div>
</div> <!-- end item -->
<div class="item"> <!-- item 2 -->
<img src="img/slider1.jpg" alt="">
<div class="carousel-caption">
<h4>Title</h4>
<p>Mollitia officia reiciendis excepturi temporibus quibusdam.</p>
</div>
</div> <!-- end item -->
<div class="item"> <!-- item 3 -->
<img src="img/slider1.jpg" alt="">
<div class="carousel-caption">
<h4>Title</h4>
<p>Quibusdam blanditiis.</p>
</div>
</div> <!-- end item -->
</div> <!-- end carousel inner -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div> <!-- end slider -->
答案 0 :(得分:3)
拿你的
<div class="caption-block"></div>
出自
<div class="carousel-inner"></div>
你需要重新设置字幕块。 Bootstrap认为你的标题可能是一个项目吗?
更新了小提琴:
189px表示&#34;字幕块&#34;的新高度div是我发现匹配容器的东西。 希望这有帮助!