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 or slideshow with previous/next controls and indicators using the Bootstrap carousel plugin.

Example

Try this code »

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>

    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/slide1.png" class="d-block w-100" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="images/slide2.png" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="images/slide3.png" class="d-block w-100" alt="Slide 3">
        </div>
    </div>

    <!-- Carousel controls -->
    <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

— The output of the above example will look something like this:

Creating Carousel with Captions

You can also add captions to carousel slides easily with the .carousel-caption element within any .carousel-item. You can optionally use display utility classes to hide captions on smaller viewports.

Let's try out the following example to understand how it basically works:

Example

Try this code »

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>
    
    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/slide1.png" class="d-block w-100" alt="Slide 1">
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some placeholder content for the first slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/slide2.png" class="d-block w-100" alt="Slide 2">
            <div class="carousel-caption d-none d-md-block">
                <h5>Second slide label</h5>
                <p>Some placeholder content for the second slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/slide3.png" class="d-block w-100" alt="Slide 3">
            <div class="carousel-caption d-none d-md-block">
                <h5>Third slide label</h5>
                <p>Some placeholder content for the third slide.</p>
            </div>
        </div>
    </div>

    <!-- Carousel controls -->
    <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

— The output of the above example will look something like this:

Tip: The classes .d-none and .d-md-block on the .carousel-caption elements in the example above makes the carousel captions visible on the medium devices (i.e. viewport width ≥768px), but hide them on the smaller viewports.

Creating Dark Variant of Carousel

You can additionally add .carousel-dark to the .carousel to create darker controls, indicators, and captions in case your slides are lighter in color. Let's check out an example:

Example

Try this code »

<div id="myCarousel" class="carousel carousel-dark slide" data-bs-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>

    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/slide1-light.png" class="d-block w-100" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="images/slide2-light.png" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="images/slide3-light.png" class="d-block w-100" alt="Slide 3">
        </div>
    </div>

    <!-- Carousel controls -->
    <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

— The output of the above example will look something like this:

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 in the following section.

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 take a look at the following example:

Example

Try this code »

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>

    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/slide1.png" class="d-block w-100" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="images/slide2.png" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="images/slide3.png" class="d-block w-100" alt="Slide 3">
        </div>
    </div>

    <!-- Carousel controls -->
    <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

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

Explanation of Code

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

The outermost container of every carousel (i.e. the .carousel element) 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-23,26) to function properly.
The data-bs-ride="carousel" attribute of the .carousel element tells the Bootstrap to start animating the carousel immediately when the page load.
The data-bs-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-10) and the content of each slide is defined within the .carousel-item element that can be text and images.
The data-bs-slide attribute on carousel controls (line no-23,26) accepts the keywords prev or next, which alters the slide position relative to its current position.

Rest of the thing is self-explanatory, for example, 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, .carousel-control-prev, .carousel-control-next elements defines previous and next controls to move between carousel slides, and so on.

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

Note: The .slide class on the .carousel element adds CSS slide transition animation to the carousel that makes the carousel items slide when showing the new item.

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.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myCarousel").carousel();
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myCarousel");
    var myCarousel = new bootstrap.Carousel(element);
});
</script>

Tip: Manually activating a carousel via JavaScript can be helpful in a situation when you don't want your carousel to start sliding or animating at page load.

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 modals options via data attributes, just append the option name to data-bs, such as data-bs-interval="3000", data-bs-pause="hover", and so on.

Name	Type	Default Value	Description
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.
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.
pause	string \| boolean	'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 `false`, hovering over the carousel won't pause it.
ride	string \| boolean	false	Autoplays the carousel after the user manually cycles the first item. If set to `'carousel'`, autoplays the carousel on load.
wrap	boolean	true	Specifies whether the carousel should cycle continuously or have hard stops (i.e stop at the last slide).
touch	boolean	true	Specifies whether the carousel should support left/right swipe interactions on touchscreen devices.

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 passing options section below to know how to set the options for carousels using JavaScript.

Methods

These are the standard bootstrap's carousels methods:

Passing options

You can additionally pass options to the carousels using options object.

The following example will turn off auto sliding in the carousel. By default Bootstrap carousel is started playing or sliding automatically when the page loads.

Example

jQuery JavaScript

Try this code »

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

<script>
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myCarousel");
    var myCarousel = new bootstrap.Carousel(element, {
        interval: false
    });
});
</script>

The following example will stop carousel from auto-sliding once the last slide has been reached.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myCarousel").carousel({
        wrap: false
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myCarousel");
    var myCarousel = new bootstrap.Carousel(element, {
        wrap: false
    });
});
</script>

cycle

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

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCarousel").carousel("cycle");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    // Create a carousel instance
    var myCarousel = new bootstrap.Carousel(element);

    btn.addEventListener("click", function(){
        myCarousel.cycle();
    });
});
</script>

pause

This method stops the carousel from cycling through items.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCarousel").carousel("pause");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    // Create a carousel instance
    var myCarousel = new bootstrap.Carousel(element);

    btn.addEventListener("click", function(){
        myCarousel.pause();
    });
});
</script>

This method cycles the carousel to the previous item.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCarousel").carousel("prev");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    // Create a carousel instance
    var myCarousel = new bootstrap.Carousel(element);

    btn.addEventListener("click", function(){
        myCarousel.prev();
    });
});
</script>

This method cycles the carousel to the next item.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCarousel").carousel("next");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    // Create a carousel instance
    var myCarousel = new bootstrap.Carousel(element);

    btn.addEventListener("click", function(){
        myCarousel.next();
    });
});
</script>

nextWhenVisible

Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myCarousel").carousel("nextWhenVisible");
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myCarousel");

    // Create a carousel instance
    var myCarousel = new bootstrap.Carousel(element);

    myCarousel.nextWhenVisible();
});
</script>

to

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

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCarousel").carousel(2);
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    // Create a carousel instance
    var myCarousel = new bootstrap.Carousel(element);

    btn.addEventListener("click", function(){
        myCarousel.to(2);
    });
});
</script>

dispose

This method destroys an element's carousel (i.e. removes stored data on the DOM element).

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myCarousel = bootstrap.Carousel.getInstance($("#myCarousel")[0]);
        console.log(myCarousel);
        // {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}

        $("#myCarousel").carousel("dispose");
        console.log(myCarousel);
        // {_element: null, _items: null, _interval: null, _activeElement: null, _isPaused: null, …}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    btn.addEventListener("click", function(){
        var myCarousel = bootstrap.Carousel.getInstance(element);
        console.log(myCarousel);
        // {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}
        
        myCarousel.dispose();
        console.log(myCarousel);
        // {_element: null, _items: null, _interval: null, _activeElement: null, _isPaused: null, …}
    });
});
</script>

getInstance

This is a static method which allows you to get the carousel instance associated with a DOM element.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myCarousel = bootstrap.Carousel.getInstance($("#myCarousel")[0]);
        console.log(myCarousel);
        // {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    btn.addEventListener("click", function() {
        var myCarousel = bootstrap.Carousel.getInstance(element);
        console.log(myCarousel);
        // {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}
    });
});
</script>

getOrCreateInstance

This is a static method which allows you to get the carousel instance associated with a DOM element, or create a new one in case if the carousel wasn't initialized.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myCarousel = bootstrap.Carousel.getOrCreateInstance($("#myCarousel")[0]);
        console.log(myCarousel);
        // {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    btn.addEventListener("click", function() {
        var myCarousel = bootstrap.Carousel.getOrCreateInstance(element);
        console.log(myCarousel);
        // {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}
    });
});
</script>

Events

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

Event	Description
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 when sliding transition of a carousel item has been fully completed. Let's try it out and see how it actually works.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myCarousel").on("slid.bs.carousel", function(){
        alert("The sliding transition of previous carousel item has been fully completed.");
    }); 
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var myCarousel = document.getElementById("myCarousel");

    myCarousel.addEventListener("slid.bs.carousel", function(){
        alert("The sliding transition of previous carousel item has been fully completed.");
    });
});
</script>

Previous Page Next Page

Bootstrap Carousel

Creating Carousels with Bootstrap

Example

Creating Carousel with Captions

Example

Creating Dark Variant of Carousel

Example

Activate Carousels via Data Attributes

Example

Explanation of Code

Activate Carousels via JavaScript

Example

Options

Methods

Passing options

Example

Example

cycle

Example

pause

Example

prev

Example

next

Example

nextWhenVisible

Example

to

Example

dispose

Example

getInstance

Example

getOrCreateInstance

Example

Events

Example

About Us

Contact

Interactive Tools