How to attach “slide” & “slid” events to the Bootstrap toolkit’s carousel?

Here’s a fiddle with a working Bootstrap carousel.

And here’s the official documentation which tells nothing about event usage.

I thought this would work but no:

            alert("Slide Event");

Based on your fiddle #carousel is wrong. It should be #myCarousel.

Updated Example:

    interval: 2000

// Could be slid or slide (slide happens before animation, slid happens after)
$('#myCarousel').on('slid', function() {
    alert("Slide Event");

With Bootstrap 3

For Bootstrap 3 implementations :

Before event

$('#myCarousel').bind('', function (e) {

After event

$('#myCarousel').bind('', function (e) {

Old post I know, but I wanted to show both slide and slid using the .on function.

So, my 2 cents…

$('#myCarousel').on('', function (e) {
    $( '.carousel' ).removeClass('color-start');
    $( '.carousel' ).addClass('color-finish');

$('#myCarousel').on('', function (e) {
    $( '.carousel' ).removeClass('color-finish');
    $( '.carousel' ).addClass('color-start');
    $('#bind').html('slid again!');

The ‘addClass & removeClass’ are for the fun of showing something is happening and when. Also, you could use this along with animate.css to add/remove the ‘animated’ class to elements .on(slide,).


The above is I don’t like ‘alerts’ and showing console.log can be a pain on smaller screens.

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   How to check if any JavaScript event listeners/handlers attached to an element/document? [duplicate]

Similar Posts