Flex Slider with different thumbnails

HTML

<script src="http://m.mantrais.com/m/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="http://m.mantrais.com/m/css/flexslider.css">
<div class="flexslider">
  <ul class="slides">
    <li class="small-thumb" data-thumb="http://www.mantrais.com/wp-content/uploads/2012/11/enterprise-app-icon1.png">
        <img src="http://placehold.it/300x200/cc0000/ffffff" />
    </li>
    <li class="small-thumb"  data-thumb="http://www.mantrais.com/wp-content/uploads/2012/11/mobile-app-icon1.png">
        <img src="http://placehold.it/300x200/ff4400/ffffff" />
    </li>
    <li class="small-thumb"  data-thumb="http://www.mantrais.com/wp-content/uploads/2012/11/cloud-app-icon1.png">
        <img src="http://placehold.it/300x200/0088cc/ffffff" />
    </li>
    <li class="small-thumb"  data-thumb="http://www.mantrais.com/wp-content/uploads/2012/11/web-design-icon1.png">
        <img src="http://placehold.it/300x200/green/ffffff" />
    </li>
    <li class="small-thumb"  data-thumb="http://www.mantrais.com/wp-content/uploads/2012/11/web-design-icon1.png">
        <img src="http://placehold.it/300x200/green/ffffff" />
    </li>
    <li class="small-thumb"  data-thumb="http://www.mantrais.com/wp-content/uploads/2012/11/web-design-icon1.png">
        <img src="http://placehold.it/300x200/green/ffffff" />
    </li>
    <li class="small-thumb"  data-thumb="http://www.mantrais.com/wp-content/uploads/2012/11/web-design-icon1.png">
        <img src="http://placehold.it/300x200/green/ffffff" />
    </li>
  </ul>
</div>

CSS

.flex-control-thumbs img {
    width: 30% !important;
    height: auto;
}
.flex-control-nav.flex-control-thumbs img {
    margin-left: auto;
    margin-right: auto;
}
.flex-direction-nav a { 
    margin: 0;
}
.flex-control-nav {
    margin-bottom: 10px;
}

JavaScript

$('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
  });

$('.flex-control-nav').insertBefore('.flex-viewport');