Bootstrap Carousel

Description

In this tutorial, you will see how to use Bootstrap to create a carousel. This will help you create content sliders, image galleries, and more.


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="../index.html" data-slide="prev">‹</a>
    <a class="carousel-control right" href="../index.html" data-slide="next">›</a>
</div>
            

Therefore, you place the items you want to display (such as images) in a circular order in the "carousel-inner" div, and create navigation for the items via "<!-- Carousel nav -->". It uses the custom data attribute "data-slide" to navigate to the previous and next items.

You must reference the jquery.js and bootstrap-carousel.js files in the HTML file where you want to create the carousel.

Bootstrap Carousel Example

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<title>Bootstrap paging example with next and previous</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.html" rel="stylesheet">
    <style type="text/css">
        body {
            margin: 50px;
        }
    </style>
</head>
<body>
<ul class="pager">
    <li>
        <a href="../index.html">Previous</a>
    </li>
    <li>
        <a href="../index.html">Next</a>
    </li>
</ul>
</body>
</html>

View example online

Paging example with old and new

Example

<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="../index.html"><img src="../images/w3r.png.html" width="111" height="30" alt="w3resource logo" /></a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="active"><a href="../index.html">Home</a></li>
                    <li><a href="../index.html">About</a></li>
                    <li><a href="../index.html">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.html" alt="HTML5 logo" width="500" height="99" /></div>
                    <div class="item"><img src="../update-images/javascript-logo.png.html" alt="JS logo" width="500" height="99" /></div>
                    <div class="item"><img src="../update-images/schema.png.html" alt="Schema.org logo" width="500" height="99" /></div>
                    <div class="item"><img src="../update-images/json.gif.html" alt="JSON logo" width="500" height="99" /></div>
                </div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="../index.html" data-slide="prev">‹</a>
                <a class="carousel-control right" href="../index.html" data-slide="next">›</a>
            </div>
        </div>
    </div>

    <hr>

    <footer>
        <p>© Company 2012</p>
    </footer>

</div> <!-- /container -->

<!-- Le javascript
================================================== -->
<!-- Placed at the bottom of the page to speed up loading -->
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js.html"></script>

View example online

Using JavaScript

You can use the following JavaScript code to create a carousel.

$('.carousel').carousel()

Below are theoptions

  • interval: Specifies the wait time for slide rotation, in milliseconds. The value type is number, and the default value is 5000. If false, the carousel will not automatically start cycling.
  • pause: Specifies that the carousel pauses when the mouse stays over the slide area, and resumes when the mouse leaves. The value type is string, and the default value is 'hover'.

Below are the carouselmethods

  • .carousel(options): Initializes the carousel component, accepts an optional options parameter of type object, and starts the slide cycle.
    • $('.carousel').carousel({
  interval: 2000 // in milliseconds
})
  • .carousel('cycle'): Cycles through the frames from left to right.
    • $('.carousel').carousel('cycle');
  • .carousel('pause'): Stops the carousel.
    • $('#myCarousel').hover(function () { 
  $(this).carousel('pause') 
}
  • .carousel(number): Positions the carousel at the specified frame (the frame index starts at 0, similar to an array).
    • $("#carousel_nav").click(function(){ 
var item = 4; 
$('#home_carousel').carousel(item); 
return false; 
});
  • .carousel('prev'): Moves the carousel to the previous frame.
  • .carousel('next'): Moves the carousel to the next frame.

Here are twoeventsused to enhance the functionality of the carousel.

  • slide: This event is triggered immediately after the slide instance method is called.
  • slid: This event is triggered after all slides have finished playing.

Click here to download all HTML, CSS, JS, and image files used in this tutorial.

Other extensions