Carrossel

Botao 1

Botao 2

Botao 3

Carrossel de Imagem

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 o exemplo da próxima página foi utilzada a biblioteca jQuery que será encontrada em jQuery (Todas as Versões) salva dentro do diretório teste-carrossel, pasta carro.

Foi usado também o plugin jCarouselLite, que pode ser encontrado em jcarosellite (download) Version 1.0.1 - (Uncompressed) (Minified) (Packed) - Jquery 1.2 Compatible, salvo dentro do mesmo diretório e da mesma pasta. (Veja código abaixo).

		
 <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">

	
                No 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:
				#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;
				 }

Plugin jCarouselLite

Esse é um plugin jQuery que serve para controlar uma lista de itens em ordem horizontal ou vertical. Ele fornece um conjunto de ferramentas, para marcação e exibição sendo flexível para navegar qualquer conteúdo baseado em HTML.

Como Fazer um Carrossel de Notícias

Para fazer um carrossel de notícias com o plugin jcarousellite é necessário a biblioteca (jquery-1.6.4rc1.js para próxima página) e o plugin. Baixar jQuery Todas as Versões da jQuery e o plugin. jcarosellite (download)

Um carrossel básico pode ser construído com apenas o seguinte trecho de código

	No javaScript:

		$(function() {
		$(".noticias").jCarouselLite({
		btnPrev: ".anterior",
		btnNext: ".proximo",
		auto: 5000,
		speed: 1000,
		vertical:true,
		visible: 1

		});
		});

Tutorial Galeria de Imagem com Css e jQuery

Carrossel

Sorgalla Carrossel (Plugin jQuery)

Sorgalla Carrossel (Documentação)

Github jCarousel

Git -controle de versão- (Ebook)

Carrossel (Plugin jQuery) jCarousel é um plugin jQuery para controlar uma lista de itens em ordem horizontal ou vertical. Ele fornece um conjunto de ferramentas full-featured e flexível para navegar qualquer conteúdo baseado em HTML em uma forma de carrossel-like.

Próxima página índice Home