<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Include in Header(ignore if already done) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Include in body -->
<div class="todayTrainings">
<h4 class="title2 text-uppercase">Carousel </h4>
<div class="control-buttons btn-nextPrev">
<a type="button" class="prev-slide" value="Previous Slide"><i class="glyphicon glyphicon-arrow-left"></i></a>
<a type="button" class="next-slide" value="Next Slide"><i class="glyphicon glyphicon-arrow-right"></i></a>
</div>
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="active item">
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</div>
<div class="item">
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</div>
<div class="item">
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</div>
</div>
</div>
</div>
.todayTrainings{width:400px; margin:auto; position: relative; overflow: hidden; background: #639636; color: #ffffff; padding: 20px; height: 167px; margin-bottom: 20px}
.btn-nextPrev{position: absolute; right: 7px; top: 10px; width: 60px; text-align: right;}
.btn-nextPrev a{ cursor:pointer; padding: 5px; border: 1px solid rgba(225, 225, 225, 0.5); color: rgba(225, 225, 225, 0.5)}
.btn-nextPrev a:hover{ border: 1px solid rgba(225, 225, 225, 0.9); color: rgba(225, 225, 225, 0.9)}
$(document).ready(function () {
// Cycles to the previous item
$(".prev-slide").click(function () {
$("#myCarousel").carousel('prev');
});
// Cycles to the next item
$(".next-slide").click(function () {
$("#myCarousel").carousel('next');
});
});
