❮ Bootstrap V2 Scrollspy Plugin Bootstrap Collapse Plugin ❯

Bootstrap Carousel Plugin

The Bootstrap Carousel Plugin is a flexible, responsive way to add a slider to your site. Additionally, the content is highly flexible and can be images, inline frames, videos, or any type of content you wish to include.

carousel.js. Alternatively, as mentioned in the Bootstrap Plugins Overview chapter, you can include bootstrap.js or the compressed bootstrap.min.js.

Example

Below is a simple slideshow using the Bootstrap Carousel Plugin to display a generic component for cycling through elements. To implement the carousel, simply add the markup. No data attributes are required; it's just simple class-based development.

Example

<div id="myCarousel" class="carousel slide">
    <!-- Carousel 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>   
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="item active">
            <img decoding="async" src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
        </div>
        <div class="item">
            <img decoding="async" src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
        </div>
        <div class="item">
            <img decoding="async" src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
        </div>
    </div>
    <!-- Carousel navigation -->
    <a class="carousel-control left" href="#myCarousel" 
       data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
    <a class="carousel-control right" href="#myCarousel" 
       data-slide="next">&rsaquo;</a>
</div>

The result is as follows:

Optional Captions

You can add captions to your slides by using the .carousel-caption element within .item. Simply place any optional HTML there, and it will be automatically aligned and formatted. The following example demonstrates this:

Example

<div id="myCarousel" class="carousel slide">
    <!-- Carousel 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>   
    <!-- Carousel items -->
    <div class="carousel-inner">

<div class="item active">
    <img decoding="async" src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
    <div class="carousel-caption">Title 1</div>
</div>
<div class="item">
    <img decoding="async" src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
    <div class="carousel-caption">Title 2</div>
</div>
<div class="item">
    <img decoding="async" src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
    <div class="carousel-caption">Title 3</div>
</div>
</div>
<!-- Carousel Navigation -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>
</div>

Result as shown below:

Usage

Via data attributes: Use data attributes to easily control the position of the carousel.
The attribute data-slide accepts the keywords prev or next, which changes the slide position relative to its current position.
Use data-slide-to to pass a raw slide index to the carousel, data-slide-to="2" will move the carousel to a specific index, with indexing starting at 0.
The data-ride="carousel" attribute is used to mark the carousel as animating starting on page load.
Via JavaScript: The carousel can be manually called via JavaScript as follows:
```
$('.carousel').carousel()
```

Options

Some options can be passed via data attributes or JavaScript. The following table lists these options:

Option Name	Type/Default Value	Data Attribute Name	Description
interval	number <br> Default: 5000	data-interval	The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause	string <br> Default: "hover"	data-pause	Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
wrap	boolean <br> Default: true	data-wrap	Whether the carousel should cycle continuously.

Methods

Here are some useful methods in the carousel plugin:

Method	Description	Example
.carousel(options)	Initializes the carousel with an optional options object and starts cycling through items.	$('#identifier').carousel({<br> interval: 2000<br>})
.carousel('cycle')	Cycles through the carousel items from left to right.	$('#identifier').carousel('cycle')

| .carousel('pause') | Pause the carousel cycle. | $('#identifier').carousel('pause') |
| .carousel(number) | Cycle the carousel to a particular frame (starts at 0, similar to an array). | $('#identifier').carousel(number) |
| .carousel('prev') | Cycle to the previous item. | $('#identifier').carousel('prev') |
| .carousel('next') | Cycle to the next item. | $('#identifier').carousel('next') |

### Example

The following example demonstrates the usage of the methods:

## Example

<div id="myCarousel" class="carousel slide">  <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>
 <div class="carousel-inner"> <div class="item active"> <img decoding="async" src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </div> <div class="item"> <img decoding="async" src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </div> <div class="item"> <img decoding="async" src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </div> </div>  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>  <div style="text-align:center;"> <input type="button" class="btn start-slide" value="Start"> <input type="button" class="btn pause-slide" value="Pause"> <input type="button" class="btn prev-slide" value="Previous Slide"> <input type="button" class="btn next-slide" value="Next Slide">

```html
<input type="button" class="btn slide-one" value="Slide 1">
<input type="button" class="btn slide-two" value="Slide 2">
<input type="button" class="btn slide-three" value="Slide 3">
</div>
</div>
<script>
$(function(){
    // Initialize carousel
    $(".start-slide").click(function(){
        $("#myCarousel").carousel('cycle');
    });
    // Pause carousel
    $(".pause-slide").click(function(){
        $("#myCarousel").carousel('pause');
    });
    // Cycle to the previous item
    $(".prev-slide").click(function(){
        $("#myCarousel").carousel('prev');
    });
    // Cycle to the next item
    $(".next-slide").click(function(){
        $("#myCarousel").carousel('next');
    });
    // Cycle to a specific frame
    $(".slide-one").click(function(){
        $("#myCarousel").carousel(0);
    });
    $(".slide-two").click(function(){
        $("#myCarousel").carousel(1);
    });
    $(".slide-three").click(function(){
        $("#myCarousel").carousel(2);
    });
});
</script>

Events

The following table lists the events used in the Carousel plugin. These events can be used as hooks in functions.

Event	Description	Example
slide.bs.carousel	This event fires immediately when the slide instance method is invoked.	$('#identifier').on('slide.bs.carousel', function () {<br> // Do something...<br>})
slid.bs.carousel	This event is fired when the carousel has completed its slide transition.	$('#identifier').on('slid.bs.carousel', function () {<br> // Do something...<br>})

Example

The following example demonstrates the usage of events:

<div id="myCarousel" class="carousel slide">
    <!-- Carousel 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>   
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="item active">
            <img decoding="async" src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
        </div>
        <div class="item">

<div>
    <div class="item">
        <img decoding="async" src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
    </div>
    <div class="item">
        <img decoding="async" src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
    </div>
</div>
<!-- Carousel Navigation -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>
</div> 
<script>
$(function(){
    $('#myCarousel').on('slide.bs.carousel', function () {
        alert("This event is fired immediately when the slide instance method is called.");
    });
});
</script>

❮ Bootstrap V2 Scrollspy Plugin Bootstrap Collapse Plugin ❯