nro-bot/carousel-override.css

## carousel-override.css
.carousel-control {
  width: 5%;
}

.carousel-caption {
  position: static;
  background: rgba(0,0,0,0.6);
  color: white;
  padding-bottom: 35px;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 15px;
}

.carousel {
  overflow: hidden;
  border-radius: 5px;
  max-width: 900px;
  margin: 1em;
}

.carousel-indicators {
  bottom: 0px;
}

## carousel.html
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bootstrap Carousel Example</title>
  <link href="./css/bootstrap.css" rel="stylesheet">
  <style>
    /* put your custom CSS here if you'd like, for instance... */
    .carousel {
      margin: 1em;
    }
  </style>
</head>

<body>


<div id="carousel-keyfeatures" class="carousel slide" data-interval="false">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-keyfeatures" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-keyfeatures" data-slide-to="1"></li>
    <li data-target="#carousel-keyfeatures" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="./images/keyfeatures/dashboard2.png" alt="[START] After logging in, you see Workbench's dashboard.">
      <div class="carousel-caption">
        [START] After logging in, you see Workbench's dashboard.
      </div>
    </div>

    <div class="item">
      <img src="./images/keyfeatures/running2.png" alt="Pipelines describe a set of computational tasks (jobs).">
      <div class="carousel-caption">
        Pipelines describe a set of computational tasks (jobs).
      </div>
    </div>

    <div class="item">
      <img src="./images/keyfeatures/log.png" alt="The output of all jobs is logged and stored automatically.">
      <div class="carousel-caption">
        The output of all jobs is logged and stored automatically.
      </div>
    </div>

  </div>

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

<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script type="text/javascript">
// Put your custom javascript options here, for instance...
$(document).ready(function() {
    $('.carousel').carousel(interval: 100;);
    });
</script>
</body>

</html>
	.carousel-control {
	width: 5%;
	}

	.carousel-caption {
	position: static;
	background: rgba(0,0,0,0.6);
	color: white;
	padding-bottom: 35px;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 15px;
	}

	.carousel {
	overflow: hidden;
	border-radius: 5px;
	max-width: 900px;
	margin: 1em;
	}

	.carousel-indicators {
	bottom: 0px;
	}
	<!doctype html>

	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Bootstrap Carousel Example</title>
	<link href="./css/bootstrap.css" rel="stylesheet">
	<style>
	/* put your custom CSS here if you'd like, for instance... */
	.carousel {
	margin: 1em;
	}
	</style>
	</head>

	<body>




	<div id="carousel-keyfeatures" class="carousel slide" data-interval="false">
	<!-- Indicators -->
	<ol class="carousel-indicators">
	<li data-target="#carousel-keyfeatures" data-slide-to="0" class="active"></li>
	<li data-target="#carousel-keyfeatures" data-slide-to="1"></li>
	<li data-target="#carousel-keyfeatures" data-slide-to="2"></li>
	</ol>

	<!-- Wrapper for slides -->
	<div class="carousel-inner" role="listbox">
	<div class="item active">
	<img src="./images/keyfeatures/dashboard2.png" alt="[START] After logging in, you see Workbench's dashboard.">
	<div class="carousel-caption">
	[START] After logging in, you see Workbench's dashboard.
	</div>
	</div>

	<div class="item">
	<img src="./images/keyfeatures/running2.png" alt="Pipelines describe a set of computational tasks (jobs).">
	<div class="carousel-caption">
	Pipelines describe a set of computational tasks (jobs).
	</div>
	</div>

	<div class="item">
	<img src="./images/keyfeatures/log.png" alt="The output of all jobs is logged and stored automatically.">
	<div class="carousel-caption">
	The output of all jobs is logged and stored automatically.
	</div>
	</div>

	</div>

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

	<script src="./js/jquery.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<script type="text/javascript">
	// Put your custom javascript options here, for instance...
	$(document).ready(function() {
	$('.carousel').carousel(interval: 100;);
	});
	</script>
	</body>

	</html>