Automatically decorate bootstrap carousel elements with navigation arrows and slide indicators

bootstrap-carousel.js

  // automatically add navigation items to carousels
  $(".carousel").append('<!-- Controls --> \
  <a class="left carousel-control" href="#" 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="#" role="button" data-slide="next"> \
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> \
    <span class="sr-only">Next</span> \
  </a>');
  // set href of carousel controls so they actually work
  $(".carousel-control").each(function(index) {
    $(this).attr('href', '#' + $(this).parents(".carousel").attr('id'));
  });
  // add indicators
  $(".carousel").each(function(index) {
    var target = $(this).attr('id');
    var ol = $("<ol class='carousel-indicators'>");
    var indicators = $(this).find('.item').map(function(index, elem) {
      var css_class = $(elem).hasClass('active') ? 'class="active"' : "";
      return '<li data-target="#' + target + '" data-slide-to="' + index + '" ' + css_class + '></li>';
    }).get();
    ol.append( indicators );
    $(this).append(ol);
  });