Select Page

Twitter Bootstrap – Improved Carousels

Code

Twitter Bootstrap is great but their carousels always bugged me.  They don’t work well with images that are not the exact same size and clients uploading their own graphics you end up with a slider that resizes depending on the current image that is loaded.

My solution (using Bootstrap 3):

  • Replace the image with a container div using the image file as a background.
  • Set width to 100% so it will expand to fill it’s container.  Set the height of the slider so it will have a consistent display regardless of the image size.
  • Win

Here is the sample page comparing the two:
https://parkhurstdesign.com/sites/bootstrapsandbox/slider-fixed.php

Sample Code from the Twitter Bootstrap website:

<div id="carousel-example" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example" data-slide-to="1"></li>
    <li data-target="#carousel-example" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

The only change is the “item” divs. I am using this in a CMS so I use inline styles for the background divs so I can set the background image files within the loop.  Just easier for my purposes.  Change the img tag to a div as follows:

<div class="item active">
  <img src="/path/image.jpg" alt="blah">
  <div style="background:url(/path/image.jpg) center center; 
          background-size:cover;" class="slider-size">
    <div class="carousel-caption">
      <h2>Headline</h2>
      <p>Content text to go here. </p>
    </div>
  </div>
</div>

The CSS:

.slider-size {
height: 400px; /* This is your slider height */
}
.carousel {
width:100%; 
margin:0 auto; /* center your carousel if other than 100% */ 
}

One more thing.  The damn sample script navigation doesn’t work on the Bootstrap website for some CMS themes.  Code changes in bold.  Here is how you fix it:

<!-- Controls -->
<a class="left carousel-control" href="javascript:void(0)" 
     data-slide="prev" data-target="#carousel-example">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="javascript:void(0)" 
     data-slide="next" data-target="#carousel-example">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>

 Accessibility concerns: with an img tag you include alt text for accessibility.  Divs unfortunately do not allow you this option.  It is a trade-off but you do include caption text within the div which helps but I am sure it is weighted differently.