这应该可以解决您的问题:
JSfiddle
还有一个高度不同的:JSfiddle
HTML
<div class="bxslider">
<div class="bxslider-inner"><div style="width:80px; height:80px; background:#CCC; padding:5px;"></div></div>
<div class="bxslider-inner"><div style="width:80px; height:80px; background:#F5F5F5; padding:5px;"></div></div>
<div class="bxslider-inner"><div style="width:80px; height:10px; background:#6699cc; padding:5px;"></div></div>
<div class="bxslider-inner"><div style="width:80px; height:80px; background:#F5F5F5; padding:5px;"></div></div>
</div>
CSS
body {
background: orange;
margin-top: 50px;
}
.bxslider-inner {
vertical-align: middle;
display: inline-block;
height: 80px;
}
JavaScript
'use strict';
jQuery(document).ready(function(){
jQuery('.bxslider').bxSlider({
mode: 'horizontal',
speed: 500,
slideMargin:20,
infiniteLoop: true,
pager: false,
controls: true,
slideWidth: 80,
minSlides: 1,
maxSlides: 5,
moveSlides: 1
}
});
// Initial
$('.bxslider-inner').each(function(){
var height_parent = $(this).css('height').replace('px', '') * 1;
var height_child = $('div', $(this)).css('height').replace('px', '') * 1;
var padding_top_child = $('div', $(this)).css('padding-top').replace('px', '') * 1;
var padding_bottom_child = $('div', $(this)).css('padding-bottom').replace('px', '') * 1;
var top_margin = (height_parent - (height_child + padding_top_child + padding_bottom_child)) / 2;
$(this).html('<div style="height: ' + top_margin + 'px; width: 100%;"></div>' + $(this).html());
});
});
请记住,计算出的中间值非常依赖于其他高度变量,例如填充、边距和边框。如果您添加这样的样式,请记住您需要将这些样式添加到计算中。另一种选择是使用box-sizing: border-box;
,因此所有这些都折叠到 div 的内部。
bxslider-inner
必须有一个高度,或者您需要以某种方式获取计算出的 DOM 高度以避免它。如果你真的想要,请留言,我会调查的。
祝你好运!
更新
- JSfiddle 更新了,现在不应该陷入循环。
- 用太高的高度测试,代码似乎没有中断,但可能溢出到隐藏
- 查看http://bxslider.com/options (> Callbacks > onSlideAfter)。如果需要,您也可以在每个周期后进行修改。如果肤色需要,您可以在此处再次修改代码