Flexslider carousel overflow

Question

I have a problem with flexslider, I'm trying to use flexslider with bootstrap girds, I wrote the following code but after first loop, there is a problem appears, the images displayed behind the carousel items, but not appear in inspect element. jsfiddle

HTML

<div class="flexslider clients-slider row">
     <ul class="slides clearfix">
        <li class="col-xs-3">
             <a href="#">
                <div class="client-item">
                    <img src="img-src" />
                    <div class="hover-layer">link</div>
                </div>
             </a>
        </li>
        ...
     </ul>
</div>

JS

$('.clients-slider').flexslider({
       animation: "slide",
       directionNav: false,
       itemWidth: 212,
       maxItems: 4,
       after: function(slider){
         slider.resize();
       }
});

CSS

.client-item {
    width: 100%;
    border: 1px solid #d9d9d9;
    background-color: #FFF;
    height: 150px;
    text-align: center;
    padding: 30px;
    float: left;
    position: relative;
}

Answer 1

Here is a solution, set background color on <li>

.flexslider .slides li {background:#fff}

demo http://jsfiddle.net/x8zycbqp/3/