Duplicated foreach image on wordpress

I have slight problem displaying images in slider, I am using <li> and foreach (thumbail from featured image). Images are shown correctly, the way i want them, but they are, for one or another reason duplicated.

Here’s the screenshot:

And here’s code I’ve been using:

<?php 
    global $post;
    $args = array(
    'numberposts' => -1,
    'post_type'    => 'client'
    );
    $home_clients = get_posts($args);
    if($home_clients): 
?>
<div class="client">
    <h5>clients</h5>
    <div class="show-client">
        <ul class="bxslider">
            <?php foreach($home_clients as $post): setup_postdata($post); 
            $client_link = get_post_meta($post->ID, 'client_link', true);
            ?>
            <li><a target = "_blank" href="<?php echo $client_link; ?>"><?php echo get_the_post_thumbnail($post->ID, 'client-thumb'); ?></a></li>
            <?php endforeach; wp_reset_postdata(); ?>
        </ul>
    </div>
    <div class="clear"></div>
</div>
<?php endif; ?>

Here’s the HTML output:

<h5>clients</h5>
    <div class="show-client">
        <ul class="bxslider">
            <li><a target = "_blank" href="#test1"><img width="50" height="50" src="http://localhost/wp-content/uploads/2014/05/redcrossx1-50x50.png" class="attachment-client-thumb wp-post-image" alt="test" /></a></li>
            <li><a target = "_blank" href="#test2"><img width="50" height="50" src="http://localhost/wp-content/uploads/2014/08/Screen-Shot-2014-08-20-at-3.14.28-PM-50x50.png" class="attachment-client-thumb wp-post-image" alt="Screen Shot 2014-08-20 at 3.14.28 PM" /></a></li>
            <li><a target = "_blank" href="#test3"><img width="50" height="33" src="http://localhost/wp-content/uploads/2014/08/DSC_9456.jpg" class="attachment-client-thumb wp-post-image" alt="DSC_9456" /></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
        </ul>
    </div>

The more i look, the more confused I am. I guess it’s something with CSS actually, but not sure why it takes too damn much to load images…

Here’s my css code:

.bot-footer .sss-client h5 {
    color: #6c6c6c;
    font-size: 43px;
    text-transform: uppercase;
    margin: 0;
    float: left;
    margin-right: 50px;
}
.bot-footer .sss-client .show-client {
    float: left;
    max-width: 877px;
    margin: 14px 0;
    height: 22px;
}
.show-client ul {
    font-size: 0;
}
.show-client ul li {
    display: inline-block;
    zoom: 1;
    *display: inline;
    width: auto !important;
    overflow: hidden;
}
.show-client ul li a {
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 22px;
    text-align: center;
    display: block;
}
.show-client ul li a:hover {
    color: #0f6cb6;
}
.show-client .bx-wrapper {
    max-width: 877px !important;
}
.show-client .bx-wrapper .bx-viewport {
    background: none;
    box-shadow: none;
    border: none;
    max-width: 740px;
    margin: 0 auto;
}
.show-client .bx-wrapper .bx-prev {
    background: url(images/icon-arrow-footer-l.png) no-repeat center;
    left: -30px;
}
.show-client .bx-wrapper .bx-next {
    background: url(images/icon-arrow-footer-r.png) no-repeat center;
    right: -10px;
}
.show-client .bx-wrapper .bx-controls-direction a {
    width: 22px;
    height: 22px;
    margin-top: -10px;
}
.show-client .bx-wrapper .bx-prev:hover {
    background-position: center center;
}
.show-client .bx-wrapper .bx-next:hover {
    background-position: center center;
}