<link href="style.css" rel="stylesheet" type="text/css" />
<link href="js/twirlie.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.twirlie-1.1.js" type="text/javascript"></script>

<script type="text/javascript">
// The code you need to run Twirlie
$(document).ready(function() {
$('#slider').twirlie({
transtime: 700
});
});
</script>

<div id="slider">

<ul>
<li><img src="images/pictures/powerful.png" /></li>

<li><img src="images/pictures/mini-tree.png" /></li>

<li><img src="images/pictures/girl.png" /></li>

</ul>

</div>
<a class="prev" href="#"></a>
<a class="next" href="#"></a>

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-3.0.2-packed.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('ul#basic_config').carouFredSel();
$('ul#user_interaction').carouFredSel({
items: {
visible : 'variable'
},
auto: false,
prev: "#prev1",
next: "#next1"
});
});
</script>

<style type="text/css" media="all">
html, body {
padding: 0;
margin: 0;
height: 100%;
}
body, div, p {
font-family: Arial, Helvetica, Verdana;
color: white;
}
h1 {
font-size: 60px;
}
a, a:link, a:active, a:visited {
color: white;
text-decoration: underline;
}
a:hover {
color: #999;
}
#wrapper {
background-color: black;
width: 600px;
margin: auto;
min-height: 100%;
}
#content {
padding: 50px;
}

.list_carousel {
margin: 0 0 30px 60px;
width: 360px;
}
.list_carousel ul {
background-color: #333;
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.list_carousel li {
font-size: 40px;
color: #666;
text-align: center;
background-color: #f0f0f0;
border: 5px solid #999;
width: 50px;
height: 50px;
padding: 0;
margin: 6px;
display: block;
float: left;
}
.clearfix {
float: none;
clear: both;
}
</style>

<div id="wrapper">
<div id="content">
<div class="list_carousel">
<ul id="basic_config">
<li>c</li>
<li>a</li>
<li>r</li>
<li>o</li>
<li>u</li>
<li>F</li>
<li>r</li>
<li>e</li>
<li>d</li>
<li>S</li>
<li>e</li>
<li>l</li>
<li> </li>
</ul>
</div>
</div>
</div>