Twitter Bootstrap carousel tutorial

Last update on August 19 2022 21:51:33 (UTC/GMT +8 hours)

Introduction

In this tutorial, you will see how to create carousel using Twitter Bootstrap. This may help you to create content slider, image galleries etc.

Usage

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

So, you keep items (e.g. images) which you want to present in cyclic order in "carousel-inner" division and navigation of the items are created with "". It uses custom data attributes "data-slide" to navigate to previous and next items.

You must include jquery.js and bootstrap-carousel.js files in the HTML file where you are creating the carousel.

Example of carousel with Twitter Bootstrap

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap pager with next and previous example</title> 
<meta name="description" content="Twitter Bootstrap pager with next and previous example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
  <ul class="pager">
  <li>
    <a href="#">Previous</a>
  </li>
  <li>
    <a href="#">Next</a>
  </li>
</ul>
</body>
</html>

View the example live.

Example of pager with old and new

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example of carousal with Twitter Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ">
    <meta name="description" content="Example of carousal with Twitter Bootstrap version 2.0 from w3resource.com">
     <!-- Le styles -->
    <link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
	<link href="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="twitter-bootstrap-v2/docs/examples/images/favicon.ico">
    <link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
  </head>
  <body>
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#"><img src="/images/w3r.png" width="111" height="30" alt="w3resource logo" /></a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="span4">
          <h2>HTML5 and JS Apps</h2>
		  <p> </p>
          <div id="myCarousel" class="carousel slide">
  			<!-- Carousel items -->
		  <div class="carousel-inner">
    	<div class="active item"><img src="/update-images/html5_logo.png" alt="HTML5 logo" width="500" height="99" /></div>
    	<div class="item"><img src="/update-images/javascript-logo.png" alt="JS logo" width="500" height="99" /></div>
    	<div class="item"><img src="/update-images/schema.png" alt="Schema.org logo" width="500" height="99" /></div>
		<div class="item"><img src="/update-images/json.gif" alt="JSON logo" width="500" height="99" /></div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
      <hr>
      <footer>
        <p>© Company 2012</p>
      </footer>
    </div> <!-- /container -->
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
  </body>
</html>

View the example live.

Using Javascript

You may use the following JavaScript code to create carousel.

$('.carousel').carousel()

Following is a list of options you may use

interval: This specifies the time to delay (in milliseconds) between one slide to another. The value is of number type. Default value is 5000
pause: This specifies that cycling of images pauses on mouseover and resumes when you leave mouse. The value is of string type. Default value is 'hover'

You may use the following methods with carousel

.carousel(options): You may use an optional options object. The object cycles through the carousel items.

$('.carousel').carousel({
  interval: 2000 // in milliseconds
})

.carousel('cycle'): If used, it cycles through the carousel items from left to right.

$('.carousel').carousel('cycle');

.carousel('pause'): If used, it stops the carousel from cycling through items.

$('#myCarousel').hover(function () { 
  $(this).carousel('pause') 
}

.carousel(number): If used, it cycles the carousel to a particular frame (0 based, similar to an array).

$("#carousel_nav").click(function(){ 
var item = 4; 
$('#home_carousel').carousel(item); 
return false; 
});

.carousel('prev'): If used, it takes the carousel to the previous item.
.carousel('next'): If used, it takes the carousel to the next item.

There are two events to enhance functionality of carousel

slide: When the slide instance method is called, this event is fired immediately.
slid: When the cycling through the slides is completed, this event is fired.

You may download all the HTML, CSS, JS and image files used in our tutorials here.

Previous: Twitter Bootstrap ScrollSpy tutorial
Next: Twitter Bootstrap typeaheads tutorial