Drupal 7 Field Template for creating a Bootstrap Carousel

drupal-7-field-bootstrap-carousel.html.php

<!-- Creates a unique number in PHP, and adds it to the Bootstrap JavaScript which is added inline -->
<!-- The random number is created to make sure multiple carousels can be on one page -->
<?php $a = mt_rand(100000,999999); drupal_add_js('(function($) {
  $(document).ready(function () {
    $(\'#myCarousel-'.$a.'\').carousel({interval: false});
     $(\'#myCarousel-'.$a.' .carousel-control.right\').click(function (e) {
        e.preventDefault();
        $(this).attr(\'href\',\'javascript:void(0)\');
        $(\'#myCarousel-'.$a.'\').carousel(\'next\');
    });
     $(\'#myCarousel-'.$a.' .carousel-control.left\').click(function (e) {
        e.preventDefault();
        $(this).attr(\'href\',\'javascript:void(0)\');
        $(\'#myCarousel-'.$a.'\').carousel(\'prev\');
    });
  });
})(jQuery);', 'inline'); ?>

<!-- Adds the unique number to the carousel id -->
<div id="myCarousel-<?php print $a ?>" class="carousel slide carousel-<?php print $a ?>" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <?php foreach ($items as $delta => $item): ?>
      <!-- If it is the first item, add the active class -->
      <?php if ($delta === 0): ?>
        <div class="item active"><?php print render($item); ?></div>
      <!-- Else we print the rest. -->
      <?php else: ?>
        <div class="item"><?php print render($item); ?></div>
      <?php endif; ?>
    <?php endforeach; ?>
  </div>
  <!-- If there are more than one items, add the controls in -->
  <?php if(count($items) > 1): ?>
  <a class="left carousel-control" href="#myCarousel-<?php print $a ?>" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel-<?php print $a ?>" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <?php endif?>
</div>