使用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>