Slider em JQuery

Desafio da vez: Slider utilizando JQuery.

Achei os dois demos abaixo:
Demo 1
Demo 2

Lado ruim: os efeitos são toscos e muito limitados.
Lado bom: ri horrores no escritório com os efeitos. Lembra aqueles efeitos do Power Point.

Lembrando, deixei uma marcação no JS para vocês testarem os efeitos e rirem um pouco.

<html>
	<head>
		<title></title>
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://www.tidbits.com.br/download/_scripts/cycle.js"></script>
		
		<style>
			dv.pics { display: none; }
			div.pics img {				
				height:271px; //Muda para o tamanho da imagem que estiver testando 				
				width: 211px; //Muda para o tamanho da imagem que estiver testando 
				overflow:hidden; //Limitando a div;
			}
		</style>
	</head>
	<body>
		<div class="pics" id="galeria1">
			<img src="01.jpg" alt="Teste de JQuery" />
			<img src="02.jpg" alt="Teste de JQuery" />
			<img src="03.jpg" alt="Teste de JQuery" />
			<img src="04.jpg" alt="Teste de JQuery" />
			<img src="05.jpg" alt="Teste de JQuery" />
		</div>
	</body>
	<script type="text/javascript">
			$(document).ready(function() {
				$('#galeria1').cycle({
					fx:'scrollLeft',
					speed:    1500, 
					timeout:  2000,
					height: 'auto',
					//Efeito
					fx: 'toss'
				});
			});
		</script>
</html>

Efeitos:

  • blindX
  • blindY
  • blindZ
  • cover
  • curtainX
  • curtainY
  • fade
  • fadeZoom
  • growX
  • growY
  • scrollUp
  • scrollDown
  • scrollLeft
  • scrollRight
  • scrollHorz
  • scrollVert
  • shuffle
  • slideX
  • slideY
  • toss
  • turnUp
  • turnDown
  • turnLeft
  • turnRight
  • uncover
  • wipe
  • zoom

Quando eu completei o script e me deparei com o problema de não ter o fadein, fiquei tão decepcionada. Então, eu fui atrás de um outro script e eu achei!
A Fonte e o Demo
Esse é um script de JQuery e pelo demo você pode alterar o código para esse abaixo:

jQuery(document).ready(function() {
jQuery(‘#mycarousel’).jcarousel({
// Movimento circular
wrap: ‘circular’,
// Demilimita o número de imagens (foi o caso).
scroll: 1,
// Se o movimento é lento ou não.
animation: ‘slow’
});
});

Vantagem: os efeitos são bem mais suaves.
Desvantagens: achei um pouco difícil colocar o código para rodar. Não sei se o fato de ter estudado há algumas horas eu já estar um pouco cansado.

Anúncios