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");
    });
Junaid Qadir Shekhanzai
  • 1,386
  • 1
  • 20
  • 38

3 Answers3

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/

Gary.S
  • 7,076
  • 1
  • 26
  • 36
  • Any help why i get an error 'Uncaught SyntaxError: Unexpected token ILLEGAL ' when i add this on my code? – Snippet Jul 16 '13 at 05: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 '13 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 '13 at 09:34
  • @Gary.S -- Not sure what changed, is just wasn't working for me in BS3 – c0r3yz Jan 28 '14 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');
});
Prashanth
  • 914
  • 10
  • 7
  • 1
    @ManicDepression they are not `slid` vs `slide` – Eli Stone Jun 13 '16 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 '17 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 '17 at 18:50
  • Oh, looks like there's a PR for https://github.com/twbs/bootstrap/pull/21668 woohoo – Csaba Toth Jan 24 '17 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.

Thumper
  • 11
  • 2