Làm cách nào để đính kèm các sự kiện "trượt" và "trượt" vào băng chuyền của bộ công cụ Bootstrap?

Question

Đây là một câu đố với băng chuyền Bootstrap đang hoạt động. http://jsfiddle.net/jeykeu/5TDff/

Và đây là tài liệu chính thức không nói gì về việc sử dụng sự kiện. http://twitter.github.com/bootstrap/javascript.html#carousel

Tôi nghĩ điều này sẽ làm việc nhưng không có:

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

Answer 1

Dựa trên fiddle bạn #carousel là sai. Nó phải là #myCarousel.

Cập nhật Ví dụ:

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

Với Bootstrap 3

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

Answer 2

Đối Bootstrap 3 triển khai:

Trước sự kiện

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

Sau sự kiện

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

Answer 3

Cũ bài tôi biết, nhưng tôi muốn để hiển thị cả slide và trượt bằng cách sử dụng chức năng .Trên.

Vì vậy, tôi 2 cent ... 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!'); 
}); 

Các 'addClass & removeClass' là dành cho những niềm vui thể hiện một cái gì đó đang xảy ra và khi nào. Ngoài ra, bạn có thể sử dụng điều này cùng với animate.css để thêm/xóa lớp 'hoạt hình' thành các phần tử .on (trang trình bày,).

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

Ở trên là tôi không thích 'cảnh báo' và hiển thị console.log có thể gây đau trên màn hình nhỏ hơn.