Как присоединить "слайд" и "скользкие" события к карусели инструментария Bootstrap?

Здесь скрипка с рабочей карусели Bootstrap. http://jsfiddle.net/jeykeu/5TDff/

И вот официальная документация, которая ничего не сообщает об использовании события. http://twitter.github.com/bootstrap/javascript.html#carousel

Я думал, что это сработает, но нет:

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

Ответ 1

На основе вашей скрипки #carousel неверно. Это должно быть #myCarousel.

Обновленный пример:

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

С Bootstrap 3

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

Ответ 2

Для реализаций Bootstrap 3:

До события

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

После события

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

Ответ 3

Старый пост, который я знаю, но я хотел показать слайд и слайд, используя функцию .on.

Итак, мои 2 цента... 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!');
});

"addClass и removeClass" - это развлечение, когда что-то происходит, и когда. Кроме того, вы можете использовать это вместе с animate.css для добавления/удаления "анимированного" класса к элементам .on(слайд).

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

Вышеупомянутое: мне не нравятся "предупреждения" и показ console.log может быть болью на меньших экранах.