Get access to an awe-inspiring collection Of 65 Beautiful Wordpress themes for the price of one Get it now Ad

Bootstrap carousel guide

Bootstrap Carousel is a simple JavaScript component included right in the Bootstrap. It can be handy in many situations, mostly presenting the visual elements on your web page.

In this guide, I will walk you through the basics to allow you using it on your page, describe its possible configuration options and I will show you how to easily modify its behaviour and make it full-screen or how to change the animation effect from slide to fade animation.

Demo 1 Demo 2 Download sources

1. Basic use

A basic page with a Bootstrap carousel might look like in this example.

Bootstrap Carousel Example

Let's have a look at its code.

<html>
    <head>
        <title>Bootstrap Carousel Guide by Bootstrapious.com</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
        <link href='custom.css' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src="img/carousel1.jpg" alt="">
                                <div class="carousel-caption">
                                    <h1>Carousel in a container</h1>
                                    <p>This is a demo for the Bootstrap Carousel Guide.</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="img/carousel2.jpg" alt="">
                            </div>
                            <div class="item">
                                <img src="img/carousel3.jpg" alt="">
                            </div>
                        </div>

                        <!-- Controls -->
                        <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>

 

Let's go trough the code right now:

  • we include Bootstrap's stylesheet and also Bootstrap minified JavaScript library, in our case both from MaxCDN
  • Bootstrap's JS is dependent on jQuery, so we should not forget to include it too
  • We will place the carousel to a Bootstrap .container and make it full-width with .col-md-12

Now, the carousel itself (main carousel element - div.carousel) consists of 3 parts: ol.carousel-indicators (bullets navigation in the carousel), div.carousel-inner (in which we will place the content to be presented) and two a.carousel-control (left and right arrow).

Bootstrap carousel elements

Main carousel element

To tell Bootstrap to make a carousel from an element, just add class="carousel" and a specific id, in our case id="generic", to a <div>. Notice, that we can pass options to the carousel via data attributes. In this case, we pass to it data-ride="carousel" that tells Bootstrap to autoplay the carousel. For the complete list of options, have a look here

Carousel indicators

This is an optional part of the carousel navigation coded in <ol class="carousel-indicators">. Each item in carousel-inner needs one <li> entry here.

Don't forget to add data-target attribute containing the carousel's id and data-slide-to attribute with the index of the slide it will be referring to (0 represents the first slide, 1 the second one, etc.).

The first <li> also should have class="active".

<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

Carousel body

The main content of the carousel goes to <div class="carousel-inner">. Wrap each of the slides to a <div class="item"> and mark the first item with an active class too. The slide can contain an image only or an image with a caption.

To create a caption, just place a <div class="carousel-caption"> with a text content into the slide. 

<div class="carousel-inner" role="listbox">
    <div class="item active">
        <img src="img/carousel1.jpg" alt="">
        <div class="carousel-caption">
            <h1>Carousel in a container</h1>
            <p>This is a demo for the Bootstrap Carousel Guide.</p>
        </div>
    </div>
    
    ...

</div>

Carousel next and prev controls

For the next and previous arrow controls, you have to place two <a> elements into your carousel's code. Notice again that the href attribute that should contain your carousel's id and the data-slide attributes with either prev or next values.

<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

2. Options

From the previous part of this article, we should have a nice Bootstrap carousel. Now it is a great time to explore a bit its possible options.

The available options for the Bootstrap carousel are:

Name type default description
interval number 5000 The amount of time to delay between automatically cycling an item. If false, the carousel will not automatically cycle.
pause string | null "hover" If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to null, hovering over the carousel won't pause it.
wrap boolean true Whether the carousel should cycle continuously or have hard stops.
keyboard boolean true Whether the carousel should react to keyboard events.

Options can be passed via data attributes of the carousel element or via Javascript.

For configuring via data attributes, just prefix the option name with data- and use it on the carousel div.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">
    ...
</div>

Using JavaScript:

$('#carousel-example-generic').carousel({
  interval: 3000,
  pause: null
})

3. Modifying the default look and behaviour

Fullscreen carousel with vertically-centered captions

The first of the modifications I would like to show you is how to make a nice fullscreen intro section with a Bootstrap carousel. 

CSS

The solution below sets the item height using vh units and will work in all modern browsers. In the carousel with a class="carousel-fullscreen", we set its slide height to 100vh (full height) and min-height to 600px (to have sufficient space for text on smaller devices).

/* carousel fullscreen */

.carousel-fullscreen .carousel-inner .item {
    height: 100vh; 
    min-height: 600px; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover;
}

/* carousel fullscreen - vertically centered caption*/

.carousel-fullscreen .carousel-caption {
    top: 50%;  
    bottom: auto;
    -webkit-transform: translate(0, -50%); 
    -ms-transform: translate(0, -50%); 
    transform: translate(0, -50%);
}

HTML

In our HTML code, we need to change the markup a bit too. Instead of using the images in a <img> tag, we will use them as backgrounds for the slide's .item. 

<div id="carousel-example-generic2" class="carousel carousel-fullscreen slide">
    <!-- Indicators -->
    ...

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active" style="background-image: url('img/carousel1.jpg');">
            <div class="overlay"></div>
            <div class="carousel-caption">
                <h1 class="super-heading">Bootstrap Carousel Guide</h1>
                <p class="super-paragraph">This is a demo for the Bootstrap Carousel Guide by <a href="https://bootstrapious.com">Bootstrapious.com</a>.</p>
            </div>
        </div>
        <div class="item" style="background-image: url('img/carousel2.jpg');">
            <div class="overlay"></div>
            <div class="carousel-caption">
                <h1 class="super-heading">Lorem ipsum dolor color</h1>
                <p class="super-paragraph">This is a demo for the Bootstrap Carousel Guide.</p>
            </div>
        </div>

        ...

    </div>

    <!-- Controls -->
    ...
</div>

Fade effect between the slides

Fade effect between the images, instead of the default sliding? All we need to do is to change from default transform transition to an opacity transition. This solution was published originally in this codepen codepen.

CSS

/* original solution by https://codepen.io/Rowno/pen/Afykb */

.carousel-fade .carousel-inner .item {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
    z-index: 2;
}

HTML

To use the fade effect, just add class="carouse-fade" to your carousel.

<div id="carousel-example-generic2" class="carousel slide carousel-fade">
   ...
</div>

Transparent overlay

Sometimes, you will need to darken the image to increase the contrast between the text and the background image. The solution is very simple, we will add just one more additional <div> to carousel's <div class="item">.

CSS

/* overlay for better readibility of the caption  */

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    transition: all 0.2s ease-out;
}

HTML

<div class="item">
    <div class="overlay"></div>
    <div class="carousel-caption">
        ...
    </div>
</div>

Demo

Have a look at the online demo featuring all these carousel upgrades.

Useful links

 

You might also like one of our Free Themes

Universal - Business & E-commerce Template

Universal is clean and stylish universal website template built with Bootstrap 3.3.2. It stands out…

View theme

Bootstrap Job Board Template
PREMIUM

Bootstrap Job Board Template

Bootstrap Jobs is our premium and complex Bootstrap theme for building jobs or …

View theme

Creative portfolio

Creative portfolio is a clean and elegant template mainly made for designers and…

View theme

Discussion