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
<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
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).
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>
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
data-ride="carousel" in our html markup, the carousel is initiated automatically on page load.
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.
This will start all the carousel components in the html file on loading.
Customize Bootstrap Carousel Slider
|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
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
.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.
|.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.
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.
|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.
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.