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

<script>
$(document).ready(function(){
    $("#myCarousel").carousel();
});
</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

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

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

Example

jQuery JavaScript

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

cycle

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

Example

jQuery JavaScript

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

pause

This method stops the carousel from cycling through items.

Example

jQuery JavaScript

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

prev

This method cycles the carousel to the previous item.

Example

jQuery JavaScript

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

next

This method cycles the carousel to the next item.

Example

jQuery JavaScript

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCarousel").carousel("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

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

to

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

Example

jQuery JavaScript

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

dispose

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

Example

jQuery JavaScript

<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>

getInstance

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

Example

jQuery JavaScript

<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>

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

<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>

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

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