Come allegare eventi "slide" e "slid" al carosello del toolkit Bootstrap?

Question

Ecco un violino con un carosello di Bootstrap funzionante. http://jsfiddle.net/jeykeu/5TDff/

Ed ecco la documentazione ufficiale che non dice nulla sull'utilizzo degli eventi. http://twitter.github.com/bootstrap/javascript.html#carousel

Ho pensato che questo avrebbe funzionato, ma no:

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

Answer 1

Sulla base vostro violino #carousel è sbagliato. Dovrebbe essere #myCarousel.

aggiornato Esempio:

$('#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/

Con Bootstrap 3

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

Answer 2

Per Bootstrap 3 implementazioni:

Prima dell'evento

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

After

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

Answer 3

Old Post lo so, ma ho voluto mostrare sia scorrevole e scivolai utilizzando la funzione .on.

Quindi, i miei 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!'); 
}); 

Il 'addClass & removeClass' sono per il divertimento di mostrare qualcosa che sta accadendo e quando. Inoltre, puoi usare questo insieme a animate.css per aggiungere/rimuovere la classe 'animata' agli elementi .on (diapositiva,).

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

Quanto sopra è che non mi piace 'avvisi' e mostrando console.log può essere un dolore su schermi più piccoli.