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);
});

如果要在幻灯片上触发它，bootstrap carousel会提供以下事件：

slide：当幻灯片实例方法为时，此事件立即触发   调用。



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

转换为jQuery，它将是：

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

如何修改bootstrap carousel javascript文件以便它可以触发此功能？

1 个答案: