web-dev-qa-db-fra.com

Comment attacher des événements "slide" & "slid" au carrousel de la boîte à outils Bootstrap?

Voici un violon avec un carrousel Bootstrap qui marche . http://jsfiddle.net/jeykeu/5TDff/

Et voici la documentation officielle qui ne dit rien sur l'utilisation de l'événement . http://Twitter.github.com/bootstrap/javascript.html#carousel

Je pensais que cela fonctionnerait mais non:

     $('#carousel').bind('slide',function(){
            alert("Slide Event");
    });
javascriptjquerytwitter-bootstrap
21
Junaid Qadir

Basé sur votre violon, #carousel est faux. Ce devrait être #myCarousel.

Exemple mis à jour:

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

Avec bootstrap 3

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

46
Gary.S

Pour les implémentationsBootstrap 3:

Avant l'événement 

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

Après l'événement 

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

Ancien post je sais, mais je voulais montrer les diapositives et les diapositives en utilisant la fonction .on.

Donc, mes 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!');
});

Les 'addClass & removeClass' sont pour le plaisir de montrer que quelque chose se passe et quand. Vous pouvez également utiliser ceci avec animate.css pour ajouter/supprimer la classe 'animée' aux éléments .on (diapositive,).

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

Ce qui précède, c'est que je n'aime pas les «alertes» et que montrer console.log peut être un problème pour les petits écrans.

0
Thumper