Bootstrap Carousel

In this tutorial you will learn how to create carousels with Bootstrap.

Creating Carousels with Bootstrap

The carousel also known as slideshow or image slider is some of the best way of showcasing the huge amount of contents within a small space on the web pages. It is a dynamic presentation of contents where text and images are made visible or accessible to the user by cycling through several items. The following example will show you how to build a simple carousel like image rotator using the Bootstrap carousel plugin.

示例

Try this code »

<div id="myCarousel" class="carousel slide" data-ride="carousel">

```
    
```
```
    <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 src="images/slide1.png" alt="First Slide">

```
        </div>
```
```
        <div class="item">
```

            <img src="images/slide2.png" alt="Second Slide">

```
        </div>
```
```
        <div class="item">
```

            <img src="images/slide3.png" alt="Third Slide">

```
        </div>
```
```
    </div>
```
```
    
```

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left"></span>

```
    </a>
```

    <a class="carousel-control right" href="#myCarousel" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right"></span>

```
    </a>
```
```
</div>
```

— 上面示例的输出将如下所示：

Check out the snippets section for examples of some beautifully designed Bootstrap carousels.

You can also add captions such as heading or description text to the individual slides of the carousel, please check out the next example.

Activate Carousels via Data Attributes

With Bootstrap you can create carousels very easily via data attributes without writing a single line of JavaScript code. Let's go through the following example:

示例

Try this code »

<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">

```
    
```
```
    <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 src="images/slide1.png" alt="First Slide">

            <div class="carousel-caption">

                <h3>First slide label</h3>

                <p>Lorem ipsum dolor sit amet...</p>

```
            </div>
```
```
        </div>
```
```
        <div class="item">
```

            <img src="images/slide2.png" alt="Second Slide">

            <div class="carousel-caption">

                <h3>Second slide label</h3>

                <p>Aliquam sit amet gravida nibh, facilisis...</p>

```
            </div>
```
```
        </div>
```
```
        <div class="item">
```

            <img src="images/slide3.png" alt="Third Slide">

            <div class="carousel-caption">

                <h3>Third slide label</h3>

                <p>Praesent commodo cursus magna vel...</p>

```
            </div>
```
```
        </div>
```
```
    </div>
```
```
    
```

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left"></span>

```
    </a>
```

    <a class="carousel-control right" href="#myCarousel" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right"></span>

```
    </a>
```
```
</div>
```

You might be wondering what this code was all about. Ok, let's go through each part of this carousel code one by one for a better understanding.

Explanation of Code

The Bootstrap carousel has basically three components — carousel indicators (small circles), carousel controls (previous and next arrows) and the carousel items or slides.

The outermost container of every carousel requires a unique id (in our case id="myCarousel") so that it can be targeted by the carousel indicators (line no-4,5,6) and carousel controls (line no-33,36) to function properly.
The data-ride="carousel" attribute of the .carousel element tells the Bootstrap to start animating the carousel immediately when the page load. Whereas the data-interval attribute specifies the time delay between two slides.
The .data-slide-to attribute (line no-4,5,6) move the slide position to a particular item (index beginning with 0) when clicking on the specific carousel indicator.
The slides are specified within the .carousel-inner (line no-9) and the content of each slide is defined within the .item element that can be text and images.
The data-slide attribute on carousel controls (line no-33,36) accepts the keywords prev or next, which alters the slide position relative to its current position.

Rest of the thing is self explanatory, such as the .carousel element specifies the Bootstrap carousel, the .carousel-indicators element indicates how many slides are there in the carousel and which slide is currently active, the .carousel-caption element used within the .item element defines the caption for that slide etc.

Tip: It is required to add the class .active to one of the slides (i.e. on the .item element). Otherwise, the carousel will not be visible.

Note: The .slide class adds CSS slide transition animation to the carousel that makes the items slide when showing the new item. But it doesn't work in Internet Explorer 8 & 9 due to lack of support of the necessary CSS3 properties.

Activate Carousels via JavaScript

You may also activate a carousel manually using the JavaScript — just call the carousel() method with the id or class selector of the wrapper element in your JavaScript code.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
     $("#myCarousel").carousel();
```
```
});
```
```
</script>
```

Options

There are certain options which can be passed to carousel() Bootstrap method to customize the functionality of a carousel. Options can be passed via data attributes or JavaScript.

For setting the carousel options via data attributes, just append the option name to data-, like data-interval="3000", data-pause="hover", etc.

Name	类型	Default Value	说明
interval	number	5000	Specifies the amount of time to delay (in milliseconds) between one slide to another in automatic cycling. If `false`, carousel will not automatically cycle.
pause	string null	"hover"	Pauses the cycling of the carousel when mouse pointer enters the carousel and resumes the cycling when mouse pointer leaves the carousel, by default. If set to `null`, hovering over the carousel won't pause it.
wrap	boolean	true	Specifies whether the carousel should cycle continuously or have hard stops (i.e stop at the last slide).
keyboard	boolean	true	Specifies whether the carousel should react to keyboard events. By default it is `true` that means if carousel has focus you can go to its previous and next slide using the left and right arrow keys on the keyboard.

Data attributes provides an easy way for setting the carousel options, however JavaScript is the more preferable way as it prevents you from repetitive work. See the .carousel(options) method in the section below to know how to set the options for carousels using JavaScript.

Disable Auto Sliding in Bootstrap Carousel

By default Bootstrap carousel is started playing or sliding automatically when the page loads. However, you can turn off this auto sliding by either setting the carousel interval option via data attribute like data-interval="false" on the .carousel element, or via JavaScript using the .carousel(options), as shown in the following example:

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
     $("#myCarousel").carousel({
```
```
         interval : false
```
```
     });
```
```
});
```
```
</script>
```

Methods

These are the standard bootstrap's carousels methods:

.carousel(options)

This method initializes the carousel with optional options and starts cycling through items.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
     $("#myCarousel").carousel({
```
```
         interval : 3000
```
```
     });
```
```
});
```
```
</script>
```

.carousel('cycle')

This method start carousel for cycling through the items from left to right.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
    $(".start-slide").click(function(){
```

        $("#myCarousel").carousel('cycle');

```
    });
```
```
});
```
```
</script>
```

.carousel('pause')

This method stops the carousel from cycling through items.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
    $(".pause-slide").click(function(){
```

        $("#myCarousel").carousel('pause');

```
    });
```
```
});
```
```
</script>
```

.carousel(number)

This method cycles the carousel to a particular frame (start with 0, similar to an array).

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
    $(".slide-three").click(function(){
```
```
        $("#myCarousel").carousel(3);
```
```
    });
```
```
});
```
```
</script>
```

.carousel('prev')

This method cycles the carousel to the previous item.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
    $(".prev-slide").click(function(){
```

        $("#myCarousel").carousel('prev');

```
    });
```
```
});
```
```
</script>
```

.carousel('next')

This method cycles the carousel to the next item.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
    $(".next-slide").click(function(){
```

        $("#myCarousel").carousel('next');

```
    });
```
```
});
```
```
</script>
```

Events

Bootstrap's carousel class includes few events for hooking into carousel functionality.

事件	说明
slide.bs.carousel	This event fires immediately when the slide instance method is called.
slid.bs.carousel	This event is fired when the carousel has completed its slide transition.

The following example displays an alert message to the user when sliding transition of a carousel item has been fully completed.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```

    $('#myCarousel').on('slid.bs.carousel', function () {

        alert("The sliding transition of previous carousel item has been fully completed.");

```
    }); 
```
```
});
```
```
</script>
```

Bootstrap Carousel

Creating Carousels with Bootstrap

示例

Activate Carousels via Data Attributes

示例

Explanation of Code

Activate Carousels via JavaScript

示例

Options

Disable Auto Sliding in Bootstrap Carousel

示例

Methods

.carousel(options)

示例

.carousel('cycle')

示例

.carousel('pause')

示例

.carousel(number)

示例

.carousel('prev')

示例

.carousel('next')

示例

Events

示例

关于我们

联系方式

互动工具