bootstrap 3 carrousel réceptif multi colonne
J'ai joué avec le bootstrap de carrousel, en essayant de faire afficher les 4 colonnes par diapositive, de réactivité. Le responsive côté des choses, c'est parfait, cependant lors de la dernière diapositive diapositives le carrousel n'est pas l'emballage de retour à la première diapositive. Il disparaît. Quelqu'un peut-il identifier le problème?
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;
}
[mise à jour] Voici une mise à jour de jsFiddle qui fonctionne grâce à la Dérive!
[update2] http://jsfiddle.net/S2rnm/795/ cette version adaptée montre un autre carrousel contenant 4, 2 ou 1 colonne en fonction de la taille de l'instrument. Il nécessite 3 du carrousel, chacun avec différentes visible-x de la classe.
source d'informationauteur gpcola
Vous devez vous connecter pour publier un commentaire.
Le problème, c'est que vous avez le carrousel des contrôles au sein de
.carousel-inner
- vous juste besoin de les placer à l'extérieur de cette classe:Exemple: http://jsfiddle.net/S2rnm/789/
J'ai essayer ce code de travail adéquat