kamigoosby kamigoosby - 4 months ago 27
jQuery Question

Show all Bootstrap Carousel Slides at once using CSS

Under a certain condition I am adding a class to my bootstrap carousel. When this class is added I would like to change the CSS so that all images within the carousel are displayed at once potentially with a horizontal scrollbar. Is there an easy way to achieve this display?

I know there is a Javascript approach where you can iterate through items and append them to one another to show multiple slides on one screen but I thought that a CSS approach would be cleaner.

Edit:
Here is the code I'm using to generate the carousel:

<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

This is an example of the CSS class for your issue.

I've add small script to pause the carousel. If you remove the carousel slide classes, then this script is not needed.

https://codepen.io/glebkema/pen/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>