我一直在玩引导轮播,试图让它响应地显示每张幻灯片 4 列。事物的响应方面是完美的,但是当最后一张幻灯片滑动时,旋转木马不会回到第一张幻灯片。它只是消失了。任何人都可以识别问题吗?
HTML
<div id="carousel-example-generic" class="carousel slide">
<!-- 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">
<!-- Slide -->
<div class="item active">
<div class="row">
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="item">
<div class="row">
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="item">
<div class="row">
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="icon-next"></span> </a>
</div>
JS
$('#carousel-example-generic').carousel();
CSS
.carousel.slide img {
width:100%;
height:auto;
}
[更新] 这是一个更新的jsFiddle,它可以工作 - 感谢 Adrift!
[update2] http://jsfiddle.net/S2rnm/795/此版本根据设备大小响应地显示包含 4、2 或 1 列的不同轮播。它需要 3 个轮播,每个轮播都有不同的 visible-x 类。