bxSlider Carousel Slider Vertical Alignment Problem

by Matt_Coughlin

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>

CSS

.bxslider-inner {
   vertical-align: middle;
    display: inline-block;
}
.bxslider-inner > div {
    display: table-cell;
    vertical-align: middle;
    height: 90px;
}

JavaScript

jQuery(document).ready(function(){
    $('.bxslider .bxslider-inner').wrapInner('<div/>');

    jQuery('.bxslider').bxSlider({
        mode: 'horizontal',
        speed: 500,
        slideMargin:20,
        infiniteLoop: true,
        pager: false,
        controls: true,
        slideWidth: 80,
        minSlides: 1,
        maxSlides: 5,
        moveSlides: 1
    });
});