如何修改引导轮播 javascript 文件以便它可以触发此功能？答案

【问题标题】：How do I modify the bootstrap carousel javascript file so that it can trigger this function?如何修改引导轮播 javascript 文件以便它可以触发此功能？
【发布时间】：2013-02-27 17:56:56
【问题描述】：

$(".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 垂直对齐的所有技巧，但我的情况行不通。）

【问题讨论】：

标签： javascript jquery css twitter-bootstrap

【解决方案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 : 当幻灯片实例方法运行时，此事件立即触发调用。

slid ：当轮播完成其幻灯片转换时触发此事件。

翻译成 jQuery 会是：

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

【讨论】：