html - multiple - Bootstrap 3 carrusel sensible de múltiples columnas
carousel bootstrap ejemplo (2)
El problema es que tienes los controles del carrusel dentro de .carousel-inner - solo necesitas colocarlos fuera de esta clase:
</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>
Ejemplo: http://jsfiddle.net/S2rnm/789/
He estado jugando con el carrusel de bootstrap, tratando de mostrar 4 columnas por diapositiva, de manera responsiva. El lado sensible de las cosas es perfecto, sin embargo, cuando la última diapositiva se desliza, el carrusel no vuelve a la primera diapositiva. Simplemente desaparece. ¿Alguien puede identificar el problema?
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;
}
[actualización] Aquí hay un jsFiddle actualizado que funciona, ¡gracias a Adrift!
[update2] http://jsfiddle.net/S2rnm/795/ esta versión muestra de manera responsiva un carrusel diferente que contiene 4, 2 o 1 columna, según el tamaño del dispositivo. Requiere 3 carruseles cada uno con diferente clase visible-x.
Intento este código funcionando correctamente
<link rel="stylesheet" href="http://webdesign9.in/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://webdesign9.in/css/bootstrap-theme.min.css" />
<script src="http://webdesign9.in/js/jquery.js"></script>
<script src="http://webdesign9.in/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_squid.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cuttlefish.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_squid.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_octopus.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_cuttlefish.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/reef_cod.jpg" alt="Image" class="img-responsive"></a>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/leather_jacktfish.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/ribbonfish.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/croaker1.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/shrimp_black_tiger.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cuttlefish.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_squid.jpg" alt="Image" class="img-responsive"></a>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-4"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right fa-4"></i></a>
</div>