In Part 1 of this tutorial series, we illustrated how you can create popovers to make the content in your landing pages more engaging. For part 2, we’re going to go over Bootstrap’s Carousel plugin.
With the carousel plugin, you’ll be able to create a list of images, items, or elements in an easy-to-view carousel. This tutorial will show you how to set up a basic carousel with multiple elements and show you how to alter the speed, direction, and controls of the carousel to your specific liking.
What You’ll Need
Just like with Popovers in part 1, carousel functions on the Twitter Bootstrap framework. So again, you’ll need;
- bootstrap-responsive.min.css
- bootstrap.min.css
- bootstrap.min.js
- jQuery v1.7.0 or higher
Older versions of Bootstrap come seperately from the Carousel and Popover plugins, so it should be noted that you’ll need an updated version of the bootstrap.js files (this tutorial uses version 2.0).
Getting Started: Basic Carousel
The carousel feature is capable of some pretty neat things, but it’s good to get the basic carousel set up first and expand with that.
Click the following link to view a page with a basic carousel.
Now that you’ve seen what a basic carousel looks like, let’s take a look at the code that allows it to happen.
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="active item"><img src="images/pic1.jpg" /></div>
<div class="item"><img src="images/pic2.jpg" /></div>
<div class="item"><img src="images/pic3.jpg" /></div>
</div>
</div>
Highlighted in blue are the important parts of the code and are essential to mechanics of your carousel. Below is a quick breakdown of each part:
- carousel slide – This class defines our carousel and its contents. Carousel directs the plugin to this content, and slide defines the transition type [sliding the next item(s) into frame].
- carousel-inner – This class defines the content which will rotate throughout your carousel.
- item active – Elements within this tag will be active and visible in your carousel rotation, as indicated by the class active. Furthermore, elements within an item tag will act as an individual slide in your carousel
- item – Elements within this class will be inactive, and not visible to your users until called upon by the carousel script.
Lastly, you can change the default behavior of your carousel by using data attributes with data-. For example, data-pause="click" will pause the carousel only when it’s clicked as opposed to the default setting of pausing when hovering over it.
Once you’ve got your carousel set up, you can call it with just a little bit of JavaScript in your <head>, like so:
<script type="text/javascript">
$(document).ready(function() {
$(‘.carousel’).carousel();
});
</script>
Adding Controls
Bootstrap also allows you to create controls for your carousels. Giving your visitors the ability to selectively scroll through items has it’s many benefits and is pretty easy to implement–just take a look at the code below:
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="active item"><img src="images/pic1.jpg" /></div>
<div class="item"><img src="images/pic2.jpg" /></div>
<div class="item"><img src="images/pic3.jpg" /></div>
</div>
<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>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
There are a couple of things to note with this code. The first is that you’ll need to place the controls and indicator code within the carousel slide div class.
The second thing to note is that if you have multiple carousels, you can specify which carousel should be affected by the data-slide="prev" and data-slide="next" actions by changing the href="#myCarousel" to its respective carousel id.
Multiple Items at Once
The ability to showcase multiple divs, images, or other elements allows us to provide a variety of comparable offers or pictures to our visitors. Luckily, with bootstrap’s framework, we can do just that. All we need is a little tweaking and additions to the above code.
<div class="row-fluid">
<div class="carousel slide" id="myCarousel">
<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>
<div class="carousel-inner">
<div class="item active"><!—-First Slide of Items—->
<ul class="thumbnails">
<li class="span4">
<h4>1st Slide: 1st item</h4>
<div class="thumbnail">
<img src="images/pic1.jpg" alt="">
</div>
<p>Descriptive Text<br>
<a href="#">Click to View More</a></p>
</li>
<li class="span4">
<h4>1st Slide: 2nd Item</h4>
<div class="thumbnail">
<img src="images/pic2.jpg" alt="">
</div>
<p>Descriptive Text<br>
<a href="#">Click to View More</a></p>
</li>
<li class="span4">
<h4>1st Slide: 3rd item</h4>
<div class="thumbnail">
<img src="images/pic3.jpg" alt="">
</div>
<p>Descriptive Text<br>
<a href="#">Click to View More</a></p>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span4">
<h4>2nd Slide: 4th Item</h4>
<div class="thumbnail">
<img src="assets/img/thumb5.jpg" alt="">
</div>
<p>Descriptive Text<br>
<a href="#">Click to View More</a></p>
</li>
<li class="span4">
<h4>2nd Slide: 5th Item</h4>
<div class="thumbnail">
<img src="assets/img/thumb6.jpg" alt="">
</div>
<p>Descriptive Text<br>
<a href="#">Click to View More</a></p>
</li>
<li class="span4">
<h4>2nd Slide: 6th Item</h4>
<div class="thumbnail">
<img src="assets/img/thumb6.jpg" alt="">
</div>
<p>Descriptive Text<br>
<a href="#">Click to View More</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>
At first glance, this may seem complicated, but it’s really quite simple. You’ll notice that towards the top, we have our indicator code, and on the bottom is the code for our left and right controls.
We then have two active div classes, each with 3 list items. The 3 list items contain our thumbnail div which then encases our desired elements.
Each element could contain member profiles to a social dating site, or a series or products from a nutritional company. Whatever you decide to go with, this carousel will allow you to showcase multiple items at once to your visitors in an entertaining and interactive manner.
Final Notes
With Bootstrap’s wide range of capabilities, there’s a whole lot you can do with just a little bit of tweaking. Bootstrap is constantly working on improving the ability to create and design effective websites to increase visitor engagement and experience. For us, that means keeping informed on new and innovative ideas so that we can share them with you here; and we’re sure there will be much more to share in the future.
Leave a Reply