bxSlider Carousel Slider Vertical Alignment Problem
HTML
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<b>Without BxSlider - How I want the slides to display</b>
<div class="bxslider-2">
<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>
<br />
<b>With BxSlider - Blue slider doesn't align in center (vertical)</b>
<br /><br />
<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 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
.bxslider-inner {
vertical-align: middle;
display: inline-block;
float: none !important;
}
JavaScript
jQuery(document).ready(function(){
jQuery('.bxslider').bxSlider({
mode: 'horizontal',
speed: 500,
slideMargin:0,
infiniteLoop: false,
pager: false,
controls: true,
slideWidth: 80,
minSlides: 1,
maxSlides: 5,
moveSlides: 2 });
});