Como fazer um Carrossel com Jquery

Atualmente com jquery se ve muita coisa pratica de se fazer, e que ajuda muito em nossos sites, uma delas é um carrossel com jquery, alem de ser muito simples se fazer um carrossel, é rápido e pratico. Mas e então ? Como fazer um carrossel com Jquery vamos lá, você pode ver um exemplo aqui de como vai ficar, é só clicar aqui.

Ou se preferir pode baixar tudo prontinho clicando aqui

HTML do Carrossel

Primeiro vamos colocar o html em nosso documento.

<div id="content">
	<div id="carrossel">
		<ul>
			<li>
				<img src="http://www.placehold.it/200x150" alt="Nome da Imagem" title="Nome da Imagem"/>
			</li>
			<li>
				<img src="http://www.placehold.it/200x150" alt="Nome da Imagem" title="Nome da Imagem"/>
			</li>
			<li>
				<img src="http://www.placehold.it/200x150" alt="Nome da Imagem" title="Nome da Imagem"/>
			</li>
			<li>
				<img src="http://www.placehold.it/200x150" alt="Nome da Imagem" title="Nome da Imagem"/>
			</li>
			<li>
				<img src="http://www.placehold.it/200x150" alt="Nome da Imagem" title="Nome da Imagem"/>
			</li>
		</ul>
	</div>
	<nav id="menu-carrossel">
		<a href="#" class="prev" title="Anterior">Anterior</a>
		<a href="#" class="next" title="Próximo">Próximo</a>
	</nav>
</div>

Dentro das li, você pode trocar a imagem por texto, colocar um elemento a para colocar links nas imagens, ou qualquer outra coisa, fica a critério seu decidir o que vai fazer com o carrossel jquery de sua página.

CSS do Carrossel Jquery

Agora colocamos o CSS, no css você pode tratar do seu jeito, com suas cores e tamanhos, eu apenas estou colocando aqui para dar um exemplo no Carrossel com Jquery.

/*reset*/
*{
    margin: 0;
    padding: 0;
    list-style: none ;
    outline: 0;
    font-family: 'Arial','Sans-Serif';
}

#content {
	margin: 0 auto;
	width: 650px;
	height: 200px;
}

#carrossel {
	float: left;
	width: 630px;
	overflow: hidden;
	height: 150px;
}

#carrossel ul li {
	width: 200px;
	height: 150px;
	float: left;
	margin: 0 5px;
}

#menu-carrossel {
	float: left;
	clear: both;
	width: 100%;
	text-align: center;
}

Você pode personalizar tudo de sua forma e preferencia, o modo como coloquei é apenas de exemplo.

Jquery do Carrossel

O jquery como todos os scripts tem que ter a galeria jquery então cole isso no seu código, antes do fechamento da tag body para questões de melhor carregamento. E lembre-se, a galeria deve ter apenas uma por página, verifique se você já não possui ela em seu código para não duplica-lá.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Em seguida o plugin do carrossel jquery.

<script type="text/javascript" src="js/jcarousellite.js"></script>

Você pode baixar o plugin completo clicando aqui.

Configuração do Carrossel

E por ultimo o de configuração do carrossel.

$(function() {
    $("#carrossel"). jCarouselLite({
        btnPrev: '.prev', 
        btnNext: '.next',
        visible: 3
    })
})

Ok, agora vou explicar o de configuração.

Na div #carrossel estamos aplicando o plugin
O btnPrev é o botão de prev, o anterior, que então colocamos entre aspas simples a classe do botão, e o mesmo se aplica para o btnNext
O visible, são a quantidade de imagens que iram aparecer

Você tem inúmeras configurações, como:

Passar automaticamente usando o auto: 800
Velocidade que ele passa usando o speed: 2000
A quantidade de imagens que passam com o scroll: 2
Passar imagens ao rodar o scroll do mouse mouseWheel: true

Você pode ver todas as configurações na página do plugin clicando neste link.

E então, o que achou ? Deixe um comentário abaixo, com sua opinião, ou entre em contato comigo para esclarecer suas dúvidas