如何修改bootstrap carousel javascript文件，以便它可以觸發此功能？

Question

$(".carousel-inner img").load(function(){ 
    var pic_height = $(this).height(); 
    var should_height = $(this).parents('.item').height(); 
    var pad = (should_height - pic_height)/2; 
    $(this).css('margin-top',pad); 
}); 

此函數使用javascript將圖像垂直居中放置到其父div。

我在.carousel()之後立即嘗試這樣做。然而，我意識到只有第一個圖像被垂直居中，其餘的都被搞砸了，因爲圖像還沒有「加載」（因此使pic_height 0）。

我的解決方案是在傳送帶前往下一張幻燈片後立即調用此函數。

但是，我不熟悉bootstrap JavaScript文件。我在哪裏添加這個功能？我如何讓它觸發這個功能？

我做不是想要一個CSS解決方案。由於我在css中的要求，純css解決方案將無法工作。 （我試圖在書中爲純CSS的垂直對齊了渾身解數，但我的情況將無法正常工作。）

Answer 1

我想你可以在DOM準備每個圖像定位是這樣的：

$(".carousel-inner img").each(function(i, e){ 
    var pic_height = $(e).height(); 
    var should_height = $(e).parents('.item').height(); 
    var pad = (should_height - pic_height)/2; 
    $(e).css('margin-top',pad); 
}); 

如果您要觸發它的滑動，旋轉木馬引導提供了以下事件：

• 幻燈片：馬上此事件在滑實例方法是 調用。

• 滑動：該事件在傳送帶完成其滑動轉換時觸發。

轉換爲jQuery的它會是：

$('.carousel').on('slide', function(e) { /* your code */ });