<div class="container-fluid">
  <div class="row">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>
      <!--Pause/Play buttons-->
      <div class="btn-group" id="carouselButtons">
        <button class="btn btn-danger btn-xs" id="carousel-pause"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span></button>
        <button class="btn btn-danger btn-xs" id="carousel-play"><span class="glyphicon glyphicon-play" aria-hidden="true"></span></button>
      </div>
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="img-responsive" src="https://res.cloudinary.com/debtiw4tn/image/upload/v1464228325/Venice_USA_jc7bsq.jpg" alt="...">
          <div class="carousel-caption">
            <h3>Man on a skateboard in Venice beach, USA.</h3>
          </div>
        </div>
        <div class="item">
          <img class="img-responsive" src="https://res.cloudinary.com/debtiw4tn/image/upload/v1464228326/Polar_night_in_Longyearbyen_Svalbard_bgq55i.jpg" alt="Polar night in Longyearbyen Svalbard">
          <div class="carousel-caption">
            <h3>Polar night in Longyearbyen Svalbard.</h3>
          </div>
        </div>
        <div class="item">
          <img class="img-responsive" src="https://res.cloudinary.com/debtiw4tn/image/upload/v1464228325/Mosque_in_Samarkand_Uzbekistan_ym9kzo.jpg" alt="Mosque_in_Samarkand_Uzbekistan">
          <div class="carousel-caption">
            <h3>Mosque in Samarkand, Uzbekistan.</h3>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>  
$aquamarine: #129797;

body {
  background-color: #AA3939;
}

.carousel-inner {
  
  > .item > img {
    width: 100%;
    height: 100%;
    
  }
  .carousel-caption {
    text-shadow: 0;
    padding-top: 0;
    padding-bottom: 10px;
    bottom: 50px;
    background-color: $aquamarine;
    opacity: 0.7;
    color: white;
  }
}

.carousel-indicators {
    bottom: 5px;
} 

.carousel-control {
    color: $aquamarine;
    &:hover,
    &:focus{
    color: darken($aquamarine, 10%);
  }
}

/*Make it Full screen*/
.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*Play/pause buttons*/
#carouselButtons {
  position: absolute;
  z-index: 15;
  bottom: 15px;
  right: 15px;
  li {
    list-style: none;
    display: inline-block;
    color: $aquamarine;
  }
}

    
View Compiled
//Make it Full Screen

var $item = $('.carousel .item'); 
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight); 
$item.addClass('full-screen');

$(window).on('resize', function (){
  $wHeight = $(window).height();
  $item.height($wHeight);
});

$('.carousel img').each(function() {
  var $src = $(this).attr('src');
  var $color = $(this).attr('data-color');
  $(this).parent().css({
    'background-image' : 'url(' + $src + ')',
    'background-color' : $color
  });
  $(this).remove();
});

//Pause/play buttons

 $(document).ready(function(){
  //$("#mycarousel").carousel( { interval: 2000 } );
  $("#carousel-pause").click(function(){
    $("#mycarousel").carousel('pause');
  });
   
  $("#carousel-play").click(function(){
    $("#mycarousel").carousel('cycle');
  });
});
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js