<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>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="http://placehold.it/760x475/cccccc/ffffff"></a>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/760x475/999999/cccccc"></a>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/760x475/dddddd/333333"></a>
</div>
</div>
<ul class="list-group col-sm-4">
<li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>Lorem ipsum dolor sit amet consetetur sadipscing</h4></li>
<li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h4>consetetur sadipscing elitr, sed diam nonumy eirmod</h4></li>
<li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><h4>tempor invidunt ut labore et dolore</h4></li>
<li class="list-group-item-action"><a href="#"><h4>Call to action</h4></a></li>
</ul>
<div class="carousel-controls">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">