índice
Página anterior
Carrossel de Imagens
Os carrosseis de imagens são utilizados para apresentar álbuns de fotos, notícias em destaque, sendo muito comuns em páginas web. É bastante simples de criar. Para esse exemplo foi utilzado um plugin da jQuery que será encontrado em jCarousel. jcarosellite (download) É um plugin para controlar uma lista de itens em ordem horizontal ou vertical. Ele fornece um conjunto de ferramentas sendo flexível para navegar em qualquer conteúdo baseado em HTML.
Procedimentos
1)Clicar com o botão direito em: Version 1.0.1 - (Uncompressed) (Minified) (Packed) - Jquery 1.2 Compatible 2)No botão direito escolher a opção salvar link como. 3)Criar um novo diretório. Para essa página o nome escolhido para o diretório foi: teste-carrossel e dentro dele uma sub-pasta com o nome carro.
Código pronto
<html>
<head>
<title>Carrossel jQuery</title>
<link rel="stylesheet" type="text/css" href="/static/css/style_carrossel_teste2.css" />
<script type= "text/javascript" src= "/teste-carrossel/carro/jquery-1.6.4rc1.js"></script>
<script type= "text/javascript" src= "/teste-carrossel/carro/jcarousellite.js"></script>
<script type= "text/javascript">
$(function(){
$("#carrossel").jCarouselLite({
auto: 800,
speed: 1000,
//vertical: true,
visible: 4 //quantidade de imagens visíveis
});
});
</script>
</head>
<body> No Html: <center> <div id= "carrossel"> <ul> <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="imagem" /></li> <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" alt="imagem" /></li> <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="imagem" /></li> <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="imagem" /></li> <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="imagem" /></li> <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="imagem" /></li> <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="imagem" /></li> <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="imagem" /></li> <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="imagem" /></li> <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="imagem" /></li> </ul> </div> </center> </body> </html>
Na folha de estilo:
*{
margin:0;
padding:0;
}
#carrossel{
width: 210px;
float:left;
}
#carrossel ul{
list-style:none;
}
#carrossel ul li{
border: 2px solid #333;
padding: 5px 0;
}
#carrossel img{
width: 170px;
height: 120px;
padding: 5px 0;
}
Todas as Versões do jQuery
jcarosellite (download)
Galeria de Imagem com Css e jQuery
Sorgalla Carrossel (Plugin jQuery)
Github jCarousel
Git -controle de versão- (Ebook)
Carrossel (Plugin jQuery)