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

4

1 回答 1

0

我认为您可以像这样将每个图像放置在 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 */ });
于 2013-03-12T09:35:55.153 回答