如何修改引導輪播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）。

我的解決方案是在輪播轉到下一張幻燈片后立即調用此函數。

但是，我不熟悉引導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);
});

如果要在幻燈片上觸發它，引導輪播會提供以下事件：

• slide：調用slide實例方法時，將立即觸發此事件。

• slid：輪播完成幻燈片轉換后，會觸發此事件。

翻譯成jQuery將會是：

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