当轮播中有一张图片时,底部的导航显示:
但是当向代码中添加第二张图片时,导航消失并且第二张图片被添加到第一张图片的底部:
这是我当前的代码,添加了第二张图片:
<div id="myCarousel" class="carousel">
<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="item active">
<img src="img/colette.png" alt="Beach" class="img-responsive">
</div>
<!-- When adding this, nav hides and new img is shown on bottom-->
<div class="item">
<img src="img/apple.png" alt="apple" class="img-responsive">
</div>
</div>
</div>
最佳答案
查看 fiddle 上的工作演示
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/450x350" alt="Slide 1">
<div class="carousel-caption">
Caption Slide 1
</div>
</div>
<div class="item">
<img src="http://placehold.it/450x350" alt="Slide 2">
<div class="carousel-caption">
Caption Slide 2
</div>
</div>
<div class="item">
<img src="http://placehold.it/450x350" alt="Slide 3">
<div class="carousel-caption">
Caption Slide 3
</div>
</div>
</div>
</div>
关于jquery - 添加图像时 Bootstrap Carousel 导航消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41439193/