Hi, this Twitter Bootstrap Carousel Tutorial will teach you How to Create an Image Slider using Bootstrap's Carousel Plug-in. Bootstrap Carousel is a lightweight component that's used to build a slide show cycling through multiple items like a carousel. These sliders are the great way to showcase the featured contents of your website mixing with images and texts. Let's see how to build a simple but effective carousel slider with images here.
How to Use Bootstrap Carousel Plug-in
Here go the step-by-step instructions on how to use bootstrap carousel slider plugin to create a slide show for your website.
Recommended Read: Cutomize Twitter Bootstrap 3 Breadcrumbs
Step-1: Setup the Environment to use Bootstrap with HTML File
First download bootstrap framework files and move its contents to your working folder. Make sure you have all the three bootstrap folders 'css', 'fonts' and 'js' in place. Now create a html file and include this markup within its <head></head> section.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
Step-2: Build Twitter Bootstrap Carousel Slider with Image and Text
Next copy this html markup inside <body></body> section which creates twitter bootstrap 3 image carousel.
<div id="mycarousel" class="carousel slide" data-ride="carousel"> <!-- Add Slide 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> <!-- Add Carousel Wrapper for Slides --> <div class="carousel-inner"> <div class="item active"> <img src="images/first-banner.jpg" alt="first banner"> <div class="carousel-caption"> <h1>Caption One</h1> </div> </div> <div class="item"> <img src="images/second-banner.jpg" alt="second banner"> <div class="carousel-caption"> <h1>Caption Two</h1> </div> </div> <div class="item"> <img src="images/third-banner.jpg" alt="third banner"> <div class="carousel-caption"> <h1>Caption Three</h1> </div> </div> </div> <!-- Add Left & Right Navigation Controls --> <a class="left carousel-control" href="#mycarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#mycarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
As you can see the above html markup is split up into three sections. The indicators section is for the small radio buttons at the base of each slide. It shows the number of slides in the carousel and which one is active by filling the hollow circle representing the slide like this.
 |
| Bootstrap Carousel Slide Indicators |
The Wrapper section is the placeholder for the actual slides and their optional captions. To add text captions to each slide, use '.carousel-caption' element inside each '.item' element.
The Navigation controls section is for the left and right arrows which allow the user to navigate back and forth through the slides. Here we have used bootstrap glyphicons to create navigation buttons for the carousel slider (Make sure you have included bootstrap's 'font' folder for this to work).
Step-3: Activate Carousel with Bootstrap JavaScript Library
Finally we need to load bootstrap js file for the carousel to start working. So include this piece of code just above </body> (closing body tag).
<script src="js/jquery-1.10.2.min.js"></script> <script src="js/bootstrap.min.js"></script>
Bootstrap JavaScript components are built over the jQuery library so we must load jQuery file before loading bootstrap js file.
Now open the html file in the browser and you can see the bootstrap carousel starts sliding automatically. Here is a sample screen shot of one of the carousel I've built with bootstrap.
 |
| Image Carousel Built with Bootstrap 3 Carousel Plug-in |
Note: Bootstrap Carousel sliding animations are not supported by IE versions 8 & 9 as they extensively depends on CSS3 for it animations.
Recommended Read: Build Dashboard Vertical Sidebar Menu with Bootstrap
Activate Twitter Bootstrap Carousel on Page Load
The bootstrap carousel can be started either through 'data attributes' or by 'javascript' method. As we have included data-ride="carousel" in our html markup, the carousel is initiated automatically on page load.
Alternatively to activate the carousel with javascript method use this,
<script type="text/javascript">
$(document).ready(function(){
$("#mycarousel").carousel();
});
</script>
This js script will start the carousel animation (sliding) on page loading.
If you have multiple carousels on a page and want to start all of them at once, then instead of using the carousel id 'mycarousel' use the generic carousel class '.carousel' to initiate them.
<script type="text/javascript">
$(document).ready(function(){
$(".carousel").carousel();
});
</script>
This will start all the carousel components in the html file on loading.
Customize Bootstrap Carousel Slider
Bootstrap carousel plug-in comes with various options to customize its behavior. Those options can be controlled either via data attributes or via javascript.
Bootstrap Carousel OptionsThese are the carousel options you can pass through the bootstrap javascript carousel() method.
| Name | Type | Default | Description |
|---|---|---|---|
| interval | number | 5000 | Indicates the time delay in milliseconds between automatically cycling from one slide to another. To stop automatic cycling, this should be set to 'false'. |
| pause | string | "hover" | Pauses the carousel sliding on mouse enter and resumes the carousel sliding on mouse leave. |
| wrap | boolean | true | Specifies whether the carousel should cycle continuously or have hard stops. |
If you wish to pass these options via data attributes, then append 'data-' with the option name like data-interval="10000", data-pause="hover" and data-wrap="true".
Change Twitter Bootstrap Carousel Interval
The default carousel slider interval is 5 secs (5000 milliseconds) but what if you want to increase the bootstrap carousel cycling speed? This is how you could change the carousel interval.
Changing the Carousel Interval via Data Attributes
<div id="mycarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
Changing the Carousel Interval via Javascript Method
<script type="text/javascript">
$(document).ready(function(){
$(".carousel").carousel({
interval: 2000
});
});
</script>
Bootstrap Carousel JavaScript Methods
The Bootstrap .carousel('options') method with optional 'options' parameter initializes the carousel plug in and starts cycling through the slides. The options parameter can take up one of these values.
| Options | Description |
|---|---|
| .carousel('cycle') | It activates the carousel for cycling items from left to right. |
| .carousel('pause') | It stops the carousel from cycling through items. |
| .carousel(number) | Cycles the carousel to a particular slide (starts from 0, similar to an array). |
| .carousel('prev') | Makes the carousel cycles to the previous item. |
| .carousel('next') | Makes the carousel cycles to the next item. |
You can make callback to these carousel methods on specific events like on load, on click etc.
Start and Stop Bootstrap Carousel Sliding using JavaScipt
For example you can include 'start' and 'stop' buttons along with carousel and make the bootstrap carousel slider to start and stop on clicking those buttons like this.
<script type="text/javascript">
$(document).ready(function(){
//start carousel sliding
$("#startbutton").click(function(){
$("#mycarousel").carousel('cycle');
});
//stop carousel sliding
$("#stopbutton").click(function(){
$("#mycarousel").carousel('pause');
});
});
</script>
Recommended Read: Build Custom Responsive Navigation Menu with Bootstrap 3
Bootstrap Carousel Events
Bootstrap's carousel class also includes few events specifically for hooking into the carousel slider functionality.
| Event Type | Description |
|---|---|
| slide.bs.carousel | This event triggered immediately when the slide instance method is invoked. |
| slid.bs.carousel | This event is triggered when the carousel has completed its slide transition. |
For example you can use them like this.
<script type="text/javascript">
$(document).ready(function(){
$('#mycarousel').on('slid.bs.carousel', function () {
//open a pop up and encourage user to take action
});
});
</script>
Now that was all about building a custom twitter bootstrap carousel slider.
If you prefer standalone sales pitch with a compelling call-to-action over sliding carousel with multiple frames, then bootstrap's jumbotron plug-in should be your choice. You can build powerful landing pages quickly by using this plug-in. Here is the Bootstrap jumbotron Tutorial that explains clearly about building jumbotron units quickly for your websites.
No comments:
Post a Comment