Ich benutze cards of bootstrap v4 (alpha), ich hätte gerne Karussell in jeder Karte wie in der folgenden Abbildung gezeigt. Leider scheint das Karussell in Karte 2 nicht zu funktionieren.Mehrere Karussells in Karten funktioniert nicht bootstrap v4
Alle Karten in einem div mit class="card-columns" gewickelt sind, würde ich verwenden möchte nur diese Klasse verwenden, da die Karten Styling für meine Anforderung angemessen ist. Andere Bootstrap-Alternativen wie class="card-deck" oder class="card-group", die nicht meinem Styling-Bedürfnis entsprechen, interessieren mich nicht.
Finden Sie den JS fiddle Link zu dem Code und finden Sie auch den folgenden Code.
Kann mir bitte jemand vorschlagen, wie ich Karussells auf mehreren Karten arbeiten lassen kann, ohne das Kartenstyling zu beeinflussen.
Hier ist ähnliche Styling für Karten von bootstap v4 css, wenn es hilft.
.card-columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1.25rem;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
}
.card-columns .card {
display: inline-block;
width: 100%;
}
Html-Code unten:
<div class="container">
<div class="card-columns">
<div class="card">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img style="width=100%;" src="https://www.ricoh.com/r_dc/caplio/r7/img/sample_04.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img style="width=100%;" src="http://2.bp.blogspot.com/-r1thEkTLZ8w/UUnTEQ0zINI/AAAAAAAAAJI/JbgDSvuhFSA/s1600/IMG_1211.JPG" alt="Second slide">
</div>
<div class="carousel-item">
<img style="width=100%;" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_(JPEG-HDR).jpg" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="card-block">
<h4 class="card-title">Card 1</h4>
</div>
</div>
<div class="card">
<div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic1" data-slide-to="1"></li>
<li data-target="#carousel-example-generic1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img style="width=100%;" src="http://nikonrumors.com/wp-content/uploads/2014/03/Nikon-1-V3-sample-photo.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img style="width=100%;" src="http://www.bestmanspeechestoasts.com/wp-content/themes/thesis/rotator/sample-4.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img style="width=100%;" src="https://blog.cloudflare.com/content/images/1.jpg.scaled500.jpg" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic1" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic1" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="card-block">
<h4 class="card-title">Card 2</h4>
</div>
</div>
</div>
</div>