Carrossel HTML5 & CSS3

Aprenda fazer um lindo Carrossel com HTML5 & CSS3, incremente ainda mais seu site.
Ótimo para publicidades e promoções.

Disponível para Download no final da página.

Folha de estilos:
<style>
body {
margin:5;
padding: 0;
border: 0;
list-style: none ;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
}
#content {
margin: 0 auto;
width: 705px;
height: 225px;
padding: 5px;
border: 2px solid #000000;
background-color: #C7CDCD;
border-radius: 10px;
}
#carrossel {
float: left;
width: 680px;
overflow: hidden;
height: 250px;
}
#carrossel ul li {
width: 220px;
height: 220px;
float: left;
margin: 0 5px;
border: 2px solid #0005FB;
}
#menu-carrossel {
float: left;
margin-bottom: 50px;
width: 100%;
text-align: center;   
}
#bt{
background-color: #990000;
padding: 5px;
border-radius: 10px;
text-decoration: none;color: #fff;
border: 2px solid #000000;
}
#bt:hover{
background-color:blue;
text-decoration: underline;
color: #fff;
}
footer{
border: 2px solid #ccc;
clear: both;
text-align: center;
}
</style>      
HTML:
<div id="content">
            <div id="carrossel">
                <ul>
                    <li>
                    <a href="https://www.comercialweb.com.br/blog/" target="_blank"><img src="imagens/imagem-01.jpg" alt="imagem-01" title="imagem-01"/></a>
                    </li>
                    <li>
                      <img src="imagens/imagem-02.jpg" alt="imagem-02" title="imagem-02"/>
                    </li>
                    <li>
                      <img src="imagens/imagem-03.jpg" alt="imagem-03" title="imagem-03"/>
                    </li>
                    <li>
                      <img src="imagens/imagem-04.jpg" alt="imagem-04" title="imagem-04"/>
                    </li>
                    <li>
                      <img src="imagens/imagem-05.jpg" alt="imagem-05" title="imagem-05"/>
                    </li>
                    <li>
                        <img src="imagens/imagem-06.jpg" alt="imagem-06" title="imagem-06"/>
                    </li>
                </ul>
            </div>
            <nav id="menu-carrossel">
<a href="#" id="bt" class="voltar" title="Voltar">? Voltar</a>
<a href="#" id="bt" class="avancar" title="Avançar">Avançar ?</a>
            </nav>
        </div>


JavaScript:
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<script type="text/javascript" src="js/carrossel.js"></script>

Veja o resultado

Download