bootstrap 3 multi-column responsive Karussell
Spiele ich schon mit dem bootstrap-Karussell, versuchen, um es anzuzeigen, 4 Spalten pro Seite, dementsprechend. Die responsive-Seite der Dinge ist perfekt, jedoch, wenn Sie die Letzte Folie, die Folien, das Karussell ist nicht einwickeln zurück zur ersten Folie. Es verschwindet einfach. Kann jemand das problem identifizieren?
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;
}
[update] Hier ist eine aktualisierte jsFiddledas funktioniert - Dank Adrift!
[update2] http://jsfiddle.net/S2rnm/795/ diese version dementsprechend zeigt ein anderes Karussell mit 4, 2 oder 1 Spalte je nach Gerät Größe. Es benötigt 3 Karussell mit jeweils unterschiedlichen sichtbar-x-Klasse.
InformationsquelleAutor der Frage gpcola | 2013-09-13
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das problem ist, dass Sie die carousel-controls innerhalb
.carousel-inner
- Sie müssen nur legen Sie Sie außerhalb dieser Klasse:Beispiel: http://jsfiddle.net/S2rnm/789/
InformationsquelleAutor der Antwort Adrift
Ich versuche, diesen code zu arbeiten ordnungsgemäße
InformationsquelleAutor der Antwort Pankaj Upadhyay