23

Here's a fiddle with a working Bootstrap carousel. http://jsfiddle.net/jeykeu/5TDff/

And here's the official documentation which tells nothing about event usage. http://twitter.github.com/bootstrap/javascript.html#carousel

I thought this would work but no:

     $('#carousel').bind('slide',function(){
            alert("Slide Event");
    });
1

3 Answers 3

48

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

Updated Example:

$('#myCarousel').carousel({
    interval: 2000
});

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

http://jsfiddle.net/infiniteloops/wPF3n/

With Bootstrap 3

http://jsfiddle.net/infiniteloops/wPF3n/252/

4
  • Any help why i get an error 'Uncaught SyntaxError: Unexpected token ILLEGAL ' when i add this on my code?
    – Snippet
    Jul 16, 2013 at 5:41
  • 31
    For anyone getting here looking for help with BootStrap 3, try this instead: $('#myCarousel').on('slid.bs.carousel', function () { alert("Slide Event"); })
    – c0r3yz
    Nov 27, 2013 at 19:49
  • @c0r3yz The existing seems to work fine with bootstrap 3 for me, is there something specific that changed?
    – Gary.S
    Nov 28, 2013 at 9:34
  • @Gary.S -- Not sure what changed, is just wasn't working for me in BS3
    – c0r3yz
    Jan 28, 2014 at 16:42
8

For Bootstrap 3 implementations :

Before event

$('#myCarousel').bind('slide.bs.carousel', function (e) {
       console.log('before');
});

After event

$('#myCarousel').bind('slid.bs.carousel', function (e) {
       console.log('after');
});
4
  • 1
    @ManicDepression they are not slid vs slide
    – Eli Stone
    Jun 13, 2016 at 12:31
  • @CsabaToth.. try fetching the index of active indicator.. I did something like this, works for me - $(".carousel-indicators li.active").data('slide-to'); You might want to check your indicators
    – T.Adak
    Jan 24, 2017 at 11:47
  • @T.Adak Yes, we can work it around with weight lifting, but it'd be just nicer to get it straight from the framework
    – Csaba Toth
    Jan 24, 2017 at 18:50
  • Oh, looks like there's a PR for github.com/twbs/bootstrap/pull/21668 woohoo
    – Csaba Toth
    Jan 24, 2017 at 18:52
1

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

So, my 2 cents... JSFiddle

$('#myCarousel').on('slide.bs.carousel', function (e) {
    $( '.carousel' ).removeClass('color-start');
    $( '.carousel' ).addClass('color-finish');
    $('#bind').html('Sliding!');
});

$('#myCarousel').on('slid.bs.carousel', 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,).

$('#bind').html('Sliding!')

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.