Field Formmatter Template FlexSlider Thumbnail.

fft-flexslider-thumb.tpl.php

<?php
/*Template Name: FlexSlider Thumbnail Slideshow*/

// Add js and css.
drupal_add_js("sites/all/libraries/flexslider/jquery.flexslider.js");
drupal_add_css("sites/all/libraries/flexslider/flexslider.css");
// dpm($data);
// FlexSlider need jQuery >= 1.7 so you need install jquery_update module and
// select jQuery 1.7 for your Drupal.
?>

<div id="slider" class="flexslider">
  <ul class="slides">
  <?php foreach ($data as $key => $item) {
    print '<li><img src="'.$item['path'].'" /></li>';
  } ?>
  </ul>
</div>

<div id="carousel" class="flexslider">
  <ul class="slides">
  <?php foreach ($data as $key => $item) {
    // path_1 is image path with selected style_1.
    print '<li><img src="'.$item['path_1'].'" /></li>';
  } ?>
  </ul>
</div>

<style type="text/css">
  .flexslider ul, .flexslider ol{
    margin: 0;
    padding: 0;
  }
</style>

<script type="text/javascript">
  (function($){
    $(document).ready(function() {
      // The slider being synced must be initialized first
      $('#carousel').flexslider({
        touch: !$.browser.mozilla,
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 210,
        itemMargin: 5,
        asNavFor: '#slider'
      });

      $('#slider').flexslider({
        touch: !$.browser.mozilla,
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel"
      });

    });
  })(jQuery);
</script>