Carrossel de imagens com jQuery
Postado por Gabriel Verta em 5/11/2009
Neste post venho mostrar-lhes outro bom plugin para jQuery, o jCarousel.
Com este plugin podemos fazer com que diversas imagens rodem em um espaço limitado tornando o layout mais amigável.
Vamos ao nosso primeiro exemplo de carrossel:
Para fazer um carrossel simples, como este, precisaremos dos arquivos de js e css da biblioteca jCarousel, além do css de skin do jCarousel a ser utilizado, e do js do jQuery. Segue o código:
<html> <head> <title>Carrossel simples com jQuery</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/jcarousel.css" /> <link rel="stylesheet" type="text/css" href="css/tango-skin.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jcarousel.js"></script> <script type="text/javascript"> $(function(){ $('#carrossel').jcarousel() }) </script> </head> <body> <h1>jCarousel - Carrosel Simples</h1> <ul id="carrossel" class="jcarousel-skin-tango"> <li><img src="img/imagem1.jpg" /></li> <li><img src="img/imagem2.jpg" /></li> <li><img src="img/imagem3.jpg" /></li> <li><img src="img/imagem4.jpg" /></li> <li><img src="img/imagem5.jpg" /></li> <li><img src="img/imagem6.jpg" /></li> </ul> </body> </html>
Este é o exemplo mais simples de utilização do jCarousel, existem várias outras variações deste através de opções passadas a ele. Dentre as funcionalidades podemos destacar:
- Carrossel Vertical
- Carrossel com scroll automático
- Carrosel com controles estáticos
- Carrossel com conteúdo dinâmico via AJAX utilizando a API do Flickr
- Scroll de Textos
- Carrossel e Thickbox (clique na imagem do carrossel)
9 Comentário para “Carrossel de imagens com jQuery”
Deixe um comentário |
Social comments and analytics for this post…
This post was mentioned on Twitter by stiod: http://bit.ly/4grIqe – Carrossel de imagens com jQuery no blog da Stiod…
Interessante, poderíamos utilizar no site?!
Oi César,
pode sim, o jcarousel é um plugin sob a licensa MIT and GPL
Já usei aqui
http://www.geek-candy.com a muito tempo auhauuha
muito bom
agora tem um Infinite Carousel http://jqueryfordesigners.com/automatic-infinite-carousel/
q me quebra a cabeça pq nao consigo fazer ele mostrar só 2 itens
se tu souber me avise
Seria o scroll de 2 em 2? Como esse:
http://pub.stiod.com/jquery/carrossel-dois.html
Basta passar a opção scroll: 2, para scroll de 2 em 2, e fazer uma alteração no css:
$(’#carrossel’).jcarousel({
scroll: 2
})
No css colocar o width das seguintes classes do tamanho ocupado por 2 imagens:
.jcarousel-container, .jcarousel-clip{
width:160px !important;
}
então, com o jcarrousel eu consigo facil
com o outro infinite q passei o link q nao e tipo o jcarousel nao faz loop direito, por isso optei pelo outro :\
Gostei do exemplo.
Agora como fazer para colocar mais 1 de na mesma pagina,de forma que fique 2 ou ate mais?
Desde já muito obrigado.
Ola Gilson,
de uma olhada no seguinte exemplo da documentação oficial:
http://sorgalla.com/projects/jcarousel/examples/static_multiple.html
Você pode colocar um id diferente em cada uma das tags e chamar normalmente:
o javascript ficaria assim:
$(function(){ $('#primeiro').jcarousel() $('#segundo').jcarousel() $('#terceiro').jcarousel() })Onde cada carrossel poderia ter uma caracteristica diferente do outro adicionando as opções, por exemplo, um simples, outro com autoscroll e outro vertical.
Muito Bom….