使用CSS一次顯示所有Bootstrap旋轉木馬幻燈片

Question

在某些情況下，我將一個類添加到自舉旋轉木馬。添加這個類時，我想更改CSS，以便可以使用水平滾動條一次性顯示傳送帶內的所有圖像。有沒有簡單的方法來實現這種顯示？

我知道有一種Javascript方法，您可以遍歷項目並將它們附加到另一個上以在一個屏幕上顯示多個幻燈片，但我認爲CSS方法會更乾淨。

編輯： 這裏是我使用來產生旋轉木馬代碼：

<div class="container vcenter"> 
<br> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     @{ 
      int counter = 0; 
      foreach (var carouselSlide in Model.Children) 
      { 
       if (counter == 0) 
       { 
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
       } 
       else 
       { 
        <li data-target="#myCarousel" data-slide-to="@counter"></li> 
       } 
       counter += 1; 
      } 
     } 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
     @{ 
      counter = 0; 
      foreach (var carouselSlide in @Model.Children) 
      { 
       if (counter == 0) 
       { 
        <div class="item active"> 
          @RenderImage(carouselSlide, x => x.Image, isEditable: true) 
        </div> 
       } 
       else 
       { 
        <div class="item"> 
         @RenderImage(carouselSlide, x => x.Image, isEditable: true) 
        </div> 
       } 
       counter += 1; 
      }   } 
    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
</div> 

Answer 1

這是你的問題的CSS類的一個實例。

我添加了小腳本來暫停輪播。如果您刪除carousel slide類，則不需要此腳本。

https://codepen.io/glebkema/full/xOJgKa

$(window).load(function() { 
 
    $('.abreast').carousel('pause'); 
 
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
/* The heart of the matter */ 
 
.abreast .carousel-inner { 
 
    overflow-x: auto; 
 
    white-space: nowrap; 
 
} 
 
.abreast .item { 
 
    display: inline-block; 
 
    margin: 6px 4px 0 0; 
 
} 
 
.abreast .carousel-control, 
 
.abreast .carousel-indicators { 
 
    display: none; 
 
} 
 

 
/* Make the images responsive. */ 
 
.carousel-inner img { 
 
    height: auto; 
 
    margin: 0 auto; 
 
    max-width: 100%; 
 
}

<div class="container"> 
 
    <h3>With the <span class="label label-default">.abreast</span> class</h3> 
 

 
    <div id="carousel-1" class="carousel slide abreast" data-ride="carousel"> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#carousel-1" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carousel-1" data-slide-to="1"></li> 
 
     <li data-target="#carousel-1" data-slide-to="2"></li> 
 
    </ol> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="//placehold.it/500x300/c69/f9c/?text=1" alt="First slide"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="//placehold.it/500x300/9c6/cf9/?text=2" alt="Second slide"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="//placehold.it/500x300/69c/9cf/?text=3" alt="Third slide"> 
 
     </div> 
 
    </div> 
 
    <a class="left carousel-control" href="#carousel-1" 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-1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a> 
 
    </div> 
 

 

 
    <h3>Without the <span class="label label-default">.abreast</span> class</h3> 
 

 
    <div id="carousel-2" class="carousel slide" data-ride="carousel"> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#carousel-2" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carousel-2" data-slide-to="1"></li> 
 
     <li data-target="#carousel-2" data-slide-to="2"></li> 
 
    </ol> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="//placehold.it/500x300/c69/f9c/?text=1" alt="First slide"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="//placehold.it/500x300/9c6/cf9/?text=2" alt="Second slide"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="//placehold.it/500x300/69c/9cf/?text=3" alt="Third slide"> 
 
     </div> 
 
    </div> 
 
    <a class="left carousel-control" href="#carousel-2" 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-2" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>