Bootstrap 3 Grid Carousel

Question

我正在嘗試製作帶有多個網格元素的旋轉木馬。我想用Bootstrap 3做到這一點，但我無法得到它。

這就是我想要的旋轉木馬。 Carousel showing a grid system rather than a single image

有些專家能幫幫我嗎？

Answer 1

我認爲最簡單的方法是將每個旋轉木馬項目用作基於單元格內容的容器。在這種情況下，我使用了一張表來保存一些圖像，但也可以使用引導行。

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>