Navigation bootstrap corousel

by Alee

HTML

<!doctype html>
<html>
<head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.3.1'></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<style>
.container {width:500px;}

.carousel, .carousel-inner .item {height:230px}
.carousel-control {top: 15% !important;}
#myCarousel {
    margin:30px 0px 0px;
    width:500px;
}
.carousel-caption h4 a {color:white; font-size:24px;}
.carousel-caption p {
margin-bottom: 0;
}
.carousel-inner .item a.whole {
display: block;
width: 100%;
height: 230px;
z-index: 10001;
position: absolute;
bottom: 0px;
}
.carousel-caption p a {display:none;}
#carousel-nav {
text-align: center;
border-bottom: 1px dotted #CCC;
}
#carousel-nav a {
margin: 5px 0px;
background: #eee;
color: #000;
display: inline-block;
width: 16px;
height: 16px;
opacity: 0.5;
filter: alpha(opacity=50);
}
#carousel-rel{
margin: -24px 0px 0px;
font-size: 0.9em;
}
#carousel-nav a.active {
background: red;
color: #fff;
}
.right,
.alignright {
float: right;
padding-left: 5px;
}
#myCarousel .right {
float: none;
}
</style>
</head>

<body>
<div class="container">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">

<div class="active item" style="background-image: url('http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg')">
    <div class="carousel-caption">
      <h4><a href="#">Title 1</a></h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan varius risus, non auctor justo interdum et. Nam iaculis, mauris nec consequat viverra, eros est suscipit ipsum, in vestibulum lorem ipsum id urna. Suspendisse vitae pulvinar nisi. Etiam vitae dictum massa. Fusce viverra cursus nisl at accumsan. In congue urna vel nisl aliquam scelerisque iaculis&nbsp;<a href="http://sos.dev42.nl/test-post-from-alex/">read more »</a></p>
<a href="#" class="whole"></a>
    </div>
</div>

<div class="item"...