Field Formatter Template with Owl Carousel

fft-owl-carousel.tpl.php

<?php
/*Template Name: Owl Carousel*/

// Add CSS and JS

drupal_add_css("//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.css", "external");
drupal_add_css("//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.theme.min.css", "external");
drupal_add_css("//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.transitions.min.css", "external");

drupal_add_js("//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.js", "external");
?>
<div id="owl-example" class="owl-carousel owl-theme">
  <?php
    foreach ($data as $key => $item) {
      print format_string('<div class="item"><img src="@path" alt="The Last of us"></div>', array('@path' => $item['path']));
    }
  ?>
</div>

<style type="text/css">
  #owl-demo .item img{
    display: block;
    width: 100%;
    height: auto;
  }
</style>

<script type="text/javascript">
  (function($){
    $(document).ready(function() {
      $("#owl-example").owlCarousel({
        navigation : true, // Show next and prev buttons
        slideSpeed : 300,
        paginationSpeed : 400,
        singleItem:true
      });
    });
  })(jQuery)
</script>