Bootstrap comes with tons of great, ready-to-use components right out of the box. The true beauty of the framework, however, lies in the ability to build additional functionality for those features with relative ease. This especially rings true in elements like the built-in carousel/slider.
For example, say your proposed site design doesn’t necessarily require a slideshow to infinitely scroll leftward (as is the default setting), or maybe you need to cycle several items within a single group. This and other techniques can be simple to achieve with Bootstrap’s inherent accommodations to your supplemental styles and markup. The same idea can of course be applied to the other built in components, but let’s take a look at a few small carousel examples to get started with refining Bootstrap to fit your needs!
Jump to:
Applying Other Transition Animations
Rotate Through Groups of Items
Create a Fullscreen Background Slider
Download Source Files for All Demos
Applying Other Transition Animations
Carousel’s Javascript initialization doesn’t include a set of animation options like many jQuery sliders available online. Not a problem; they can very easily be adopted into Bootstrap with the help of CSS3’s transition attribute.
First, the base carousel markup, which is a pretty standard setup:
<div id="myCarousel" class="carousel container slide">
<!-- Dot Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
<div class="active item"><img src="assets/img/slide1.jpg" alt="" /></div>
<div class="item"><img src="assets/img/slide2.jpg" alt="" /></div>
<div class="item"><img src="assets/img/slide3.jpg" alt="" /></div>
</div>
<!-- Navigation -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Now for the CSS to make the fade happen, where a transition time of 1 second is set:
.carousel {
height: 400px;
overflow: hidden;
}
.carousel .item {
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.carousel .active.left, .carousel .active.right {
left:0;
opacity:0;
z-index:2;
}
.carousel .next, .carousel .prev {
left:0;
opacity:1;
z-index:1;
}
Finally, a small bit of initialization in your header to establish a 7-second pause time between transitions:
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel({interval: 7000});
});
</script>
That’s it! Check out the demo to see it in action.
View The Demo
Rotate Through Groups of Items
The carousel function doesn’t have to be limited to single divs or images. We can cycle through and showcase small clusters of items, one group at a time, by taking advantage of Bootstrap’s dynamic grid layout. This can also be useful for creating a row of thumbnails to potentially interact with another carousel or component within the page.
You’ll be writing a bit more this time to accommodate for several more items in the carousel. The markup itself stays relatively simple, though. Here we have it setup like a “new product” showcase:
<div class="row-fluid">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<img src="assets/img/thumb1.jpg" alt="">
</div>
<p>First item<br>
<small class="red">$19.99</small><br>
<a href="#" class="btn btn-success">Buy Now</a></p>
</li>
<li class="span3">
<div class="thumbnail">
<img src="assets/img/thumb2.jpg" alt="">
</div>
<p>This is second<br>
<small class="red">$19.99</small><br>
<a href="#" class="btn btn-success">Buy Now</a></p>
</li>
<li class="span3">
<div class="thumbnail">
<img src="assets/img/thumb3.jpg" alt="">
</div>
<p>Third product<br>
<small class="red">$19.99</small><br>
<a href="#" class="btn btn-success">Buy Now</a></p>
</li>
<li class="span3">
<div class="thumbnail">
<img src="assets/img/thumb4.jpg" alt="">
</div>
<p>And the fourth<br>
<small class="red">$19.99</small><br>
<a href="#" class="btn btn-success">Buy Now</a></p>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<img src="assets/img/thumb5.jpg" alt="">
</div>
<p>Another caption<br>
<small class="red">$19.99</small><br>
<a href="#" class="btn btn-success">Buy Now</a></p>
</li>
<li class="span3">
<div class="thumbnail">
<img src="assets/img/thumb6.jpg" alt="">
</div>
<p>Another caption<br>
<small class="red">$19.99</small><br>
<a href="#" class="btn btn-success">Buy Now</a></p>
</li>
<li class="span3">
<div class="thumbnail">
<img src="assets/img/thumb7.jpg" alt="">
</div>
<p>Another caption<br>
<small class="red">$19.99</small><br>
<a href="#" class="btn btn-success">Buy Now</a></p>
</li>
<li class="span3">
<div class="thumbnail">
<img src="assets/img/thumb8.jpg" alt="">
</div>
<p>Another caption<br>
<small class="red">$19.99</small><br>
<a href="#" class="btn btn-success">Buy Now</a></p>
</li>
</ul>
</div>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</div>
</div>
To maintain a smooth scroll between groups, it’s recommended that all thumbnails are a consistent size. With CSS, we can make any image conform proportionally to the thumbnail box:
.thumbnail {
width: 260px;
height: 180px;
overflow: hidden; /* contain images within thumbnail boundaries */
border: 0; /* removes Bootstrap's default border */
box-shadow: 0 12px 12px -10px #c4c4c4;
-webkit-box-shadow: 0 17px 22px -20px #c4c4c4;
-moz-box-shadow: 0 12px 12px -10px #c4c4c4;
}
.thumbnail img { width:100%; height:auto; } /* to keep proportions */
.thumbnails p { text-align: center; padding: 10px; } /* captions can be styled with an inline element */
Remember to initialize the JS function, but no timer is necessary this time around:
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel();
});
</script>
Check out the demo to see it in action.
View The Demo
Create a Fullscreen Background Slider
With the right group of photos, an ever-alternating background can quite beautifully maintain an interesting aesthetic to a site’s design. Using the opacity transition learned earlier, here’s how to apply this technique on a larger scale.
The HTML here is the easiest in this tutorial. This will make more sense in just a moment, but notice that there aren’t actually any images called here:
<div id="myCarousel" class="carousel container slide">
<div class="carousel-inner">
<div class="active item one"></div>
<div class="item two"></div>
<div class="item three"></div>
</div>
</div>
This is where everything happens. Your stylesheet will utilize the opacity transition we experimented with earlier to work in conjunction with another CSS3 feature, the background-size condition. This added attribute ensures the background will scale cleanly with different browser sizes:
.carousel { z-index: -99; } /* keeps this behind all content */
.carousel .item {
position: fixed;
width: 100%; height: 100%;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.carousel .one {
background: url(assets/img/slide3blur.jpg);
background-size: cover;
-moz-background-size: cover;
}
.carousel .two {
background: url(assets/img/slide2blur.jpg);
background-size: cover;
-moz-background-size: cover;
}
.carousel .three {
background: url(assets/img/slide1blur.jpg);
background-size: cover;
-moz-background-size: cover;
}
.carousel .active.left {
left:0;
opacity:0;
z-index:2;
}
So, the images are referenced here instead of the main markup. This is because background-size will do what we need without us having to add some Javascript to get the scaling right. Notice that it’s repeated for each item class. It seems cumbersome, but it is necessary since declaring a class’s background image tends to reset the background-size setting, even when background-size is attempted universally in the “.item” class.
Return to the Javascript of the first demo to establish the pause timer:
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel({interval: 7000});
});
</script>
Check out the demo to see it in action.
Hi, great tutorial thanks. Is there to modify the carousel to display multiple thumbnails at once (like you described) but only advance the items one at a time?
Hi I am using the last example, however I am try to have a carousel on top of the background but the css from the background is messing with the settings? Is there a way to change this at all?
Hi, really helpful tutorial, thanks!
I’ve been using your code of the full background carousel since bootstrap 2.2 and 2.3 .
However, the full background carousel doesn’t seem to work in bootstrap 3.0.0 .
Can you help me out?