❮ Bootstrap V2 Buttons Bootstrap Navigation Elements ❯

Bootstrap `Carousel`

Description

In this tutorial, you will learn how to create a carousel using Bootstrap. 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="#myCarousel" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

So, you place the items you want to display (such as images) in a cyclic order inside the "carousel-inner" div, and create navigation for the items using "". It uses custom data attributes "data-slide" to navigate to the previous and next items.

You must reference the jquery.js and bootstrap-carousel.js files in your 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 Pager 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" 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>

Pager 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="#"><img decoding="async" 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> </div> </div> </div>

<hr>

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

</div>

<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>

Using JavaScript

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

$('.carousel').carousel()

Here are the options you can use:

interval: Specifies the wait time between slide transitions, in milliseconds. The value type is number, and the default value is 5000. If set to false, the carousel will not automatically cycle.
pause: Specifies that the carousel pauses on mouseenter and resumes on mouseleave. The value type is string, and the default value is 'hover'.

Here are the carousel methods you can use:

.carousel(options): Initializes the carousel component, accepting an optional object-type options parameter, and starts the slide loop.

$('.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 to the specified frame (frame index starts at 0, similar to an array).
```
$("#carousel_nav").click(function(){ 
var item = 4; 
$('#home_carousel').carousel(item); 
return false; 
});
```
.carousel('prev'): Switches the carousel to the previous frame.
.carousel('next'): Switches the carousel to the next frame.

There are two events 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 been played.

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

❮ Bootstrap V2 Buttons Bootstrap Navigation Elements ❯