bootstrap 3多列响应式轮播

本文介绍了bootstrap 3多列响应式轮播的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我一直在使用自举轮播，试图使它在每张幻灯片中以响应方式显示4列。反应灵敏的一面是完美的，但是当最后一张幻灯片滑动时，旋转木马并没有回到第一张幻灯片。它只是消失了。谁能找出问题所在？

I've been playing with the bootstrap carousel, trying to make it display 4 columns per slide, responsively. The responsive side of things is perfect, however when the last slide slides the carousel isn't wrapping back to the first slide. It just disappears. Can anyone identify the problem?

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="placehold.it/260x180" alt=""/> <div class="carousel-caption">This is a caption</div> </div> <div class="col-sm-3 col-xs-6"> <img src="placehold.it/260x180" alt=""/> <div class="carousel-caption">This is a caption</div> </div> <div class="col-sm-3 col-xs-6"> <img src="placehold.it/260x180" alt=""/> <div class="carousel-caption">This is a caption</div> </div> <div class="col-sm-3 col-xs-6"> <img src="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="placehold.it/260x180" alt=""/> <div class="carousel-caption">This is a caption</div> </div> <div class="col-sm-3 col-xs-6"> <img src="placehold.it/260x180" alt=""/> <div class="carousel-caption">This is a caption</div> </div> <div class="col-sm-3 col-xs-6"> <img src="placehold.it/260x180" alt=""/> <div class="carousel-caption">This is a caption</div> </div> <div class="col-sm-3 col-xs-6"> <img src="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="placehold.it/260x180" alt=""/> <div class="carousel-caption">This is a caption</div> </div> <div class="col-sm-3 col-xs-6"> <img src="placehold.it/260x180" alt=""/> <div class="carousel-caption">This is a caption</div> </div> <div class="col-sm-3 col-xs-6"> <img src="placehold.it/260x180" alt=""/> <div class="carousel-caption">This is a caption</div> </div> <div class="col-sm-3 col-xs-6"> <img src="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

[更新]这是更新的 jsFiddle 有效-感谢Adrift！

[update] Here's an updated jsFiddle that works - thanks to Adrift!

[update2] jsfiddle/S2rnm/795/ 此版本会根据设备尺寸显示包含4、2或1列的不同轮播。它需要3个轮播，每个轮播都有不同的visible-x类。

[update2] jsfiddle/S2rnm/795/ this version responsively shows a different carousel containing 4, 2 or 1 column depending on device size. It requires 3 carousel's each with different visible-x class.

推荐答案

问题是您的 .carousel-inner -您只需要将它们放在此类之外：

The problem is that you have the carousel controls within .carousel-inner - you just need to place them outside of this class:

</div> <!-- Close the .carousel-inner class before the 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>

示例： jsfiddle/S2rnm/789/