Bootstrap 3 Gitterkarussell

Question

Ich versuche ein Karussell mit mehreren Gitterelementen zu machen. Ich möchte das mit Bootstrap 3 machen, aber ich verstehe es nicht.

So möchte ich das Karussell.

Einige Experten, die mir helfen können?

Answer 1

Ich denke, der einfachste Weg, dies zu tun ist, jedes Karussell Element als Behälter für Ihre Zelle basierten Inhalt zu verwenden. In diesem Fall habe ich eine Tabelle verwendet, um einige Bilder aufzunehmen, aber man hätte genauso gut eine Bootstrap-Zeile verwenden können.

td { 
 
    background-image: url(http://lorempixel.com/72/72/); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    width: 33%; 
 
    height: 100px; 
 
    border: solid 2px aliceblue; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 

 
    <!-- 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" role="listbox"> 
 
    <div class="item active"> 
 
     <table style="width: 100%;"> 
 
     <tr><td></td><td rowspan="2"></td><td></td></tr> 
 
     <tr><td></td><td></td></tr> 
 
     </table> 
 
    </div> 
 

 
    <div class="item"> 
 
     <table style="width: 100%;"> 
 
     <tr><td rowspan="2"></td><td></td><td rowspan="2"></td></tr> 
 
     <tr><td></td></tr> 
 
     </table> 
 
    </div> 
 

 
    <div class="item"> 
 
     <table style="width: 100%;"> 
 
     <tr><td></td><td></td><td></td></tr> 
 
     <tr><td></td><td></td><td></td></tr> 
 
     </table> 
 
    </div> 
 

 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" 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="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 2

td { 
 
    background-image: url(http://lorempixel.com/72/72/); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    width: 33%; 
 
    height: 100px; 
 
    border: solid 2px aliceblue; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 

 
    <!-- 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" role="listbox"> 
 
    <div class="item active"> 
 
     <table style="width: 100%;"> 
 
     <tr><td></td><td rowspan="2"></td><td></td></tr> 
 
     <tr><td></td><td></td></tr> 
 
     </table> 
 
    </div> 
 

 
    <div class="item"> 
 
     <table style="width: 100%;"> 
 
     <tr><td rowspan="2"></td><td></td><td rowspan="2"></td></tr> 
 
     <tr><td></td></tr> 
 
     </table> 
 
    </div> 
 

 
    <div class="item"> 
 
     <table style="width: 100%;"> 
 
     <tr><td></td><td></td><td></td></tr> 
 
     <tr><td></td><td></td><td></td></tr> 
 
     </table> 
 
    </div> 
 

 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" 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="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>