Como criar um slideshow usando Jquery e o Plugin Cycle em 3 minutos

Com o plugin cycle do jQuery é possível criar diversos tipos de slideshows, sem saber javascript, em 3 apenas minutos. Sem exagero algum, se dúvida disso, leia o post todo, depois deixe um miojo na água fervendo enquanto faz o slideshow e se queimar pode me mandar um email me xingando.

O plugin é bem leve ( 10kb ) e pode ser baixado no aqui ou no site do plugin (lá pode ter versões mais novas).

E vamos aos códigos.

Invoque os scripts dentro da tag head da sua página:

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

Você pode baixar o cycle aqui e o jquery aqui.

Para as imagens não serem mostradas antes do load total da página, coloque a seguinte linha de código no seu css:

dv.pics { display: none; }
div.pics img { 
    height: 200px; // altura das imagens
    width: 300px; // largura das imagens
    overflow:hidden; // limitando a div
} 

Escreva o html:

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

E depois é só brincar com as opções do cycle :
Primeiro exemplo:

<script type="text/javascript">
	$(document).ready(function() {
		$('#galeria1').cycle({ 
			fx:'scrollLeft',
			speed:    3000
		});
	});
</script>
Teste de JQueryTeste de JQueryTeste de JQueryTeste de JQueryTeste de JQuery

O Speed é a velocidade de transição, fx o efeito.

Além desse efeito existem mais 27 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 e zoom

Segundo exemplo, com play e pause:

<script type="text/javascript">
	$(document).ready(function() {
		$('#galeria2').cycle({ 
			fx:        'growX',
			speed:    3000
		});				
		$('#pauseButton').click(function() { 
			$('#galeria2').cycle('pause'); 
		});		
		$('#resumeButton').click(function() { 
			$('#galeria2').cycle('resume'); 
		});	
	});
</script>
Teste de JQueryTeste de JQueryTeste de JQueryTeste de JQueryTeste de JQuery

Existem diversas outras opções como botão anterior e próximo, paginação, etc.

Segue abaixo a lista de opções (em inglês).

Opção Valor O que faz?
fx ‘fade’ one of: fade, shuffle, zoom, scrollLeft, etc
timeout 4000 milliseconds between slide transitions (0 to disable auto advance)
continuous 0 true to start next transition immediately after current one completes
speed 1000 speed of the transition (any valid fx speed value)
speedIn null speed of the ‘in’ transition
speedOut null speed of the ‘out’ transition
next null id of element to use as click trigger for next slide
prev null id of element to use as click trigger for previous slide
prevNextClick null callback fn for prev/next clicks : function(isNext, zeroBasedSlideIndex, slideElement)
pager null id of element to use as pager container
pagerClick null callback fn for pager clicks: function(zeroBasedSlideIndex, slideElement)
pagerEvent ‘click’ event which drives the pager navigation
pagerAnchorBuilder null callback fn for building anchor links
before null transition callback (scope set to element to be shown)
after null transition callback (scope set to element that was shown)
end null callback invoked when the slideshow terminates (use with autostop or nowrap options)
easing null easing method for both in and out transitions
easeIn null easing for “in” transition
easeOut null easing for “out” transition
shuffle null coords for shuffle animation, ex: { top:15, left: 200 }
animIn null properties that define how the slide animates in
animOut null properties that define how the slide animates out
cssBefore null properties that define the initial state of the slide before transitioning in
cssAfter null properties that defined the state of the slide after transitioning out
fxFn null function used to control the transition
height ‘auto’ container height
startingSlide 0 zero-based index of the first slide to be displayed
sync 1 true if in/out transitions should occur simultaneously
random 0 true for random, false for sequence (not applicable to shuffle fx)
fit 0 force slides to fit container
pause 0 true to enable “pause on hover”
autostop 0 true to end slideshow after X transitions (where X == slide count)
autostopCount 0 number of transitions (optionally used with autostop to define X)
delay 0 additional delay (in ms) for first transition (hint can be negative)
slideExpr null expression for selecting slides (if something other than all children is required)
cleartype 0 true if clearType corrections should be applied (for IE)
nowrap 0 true to prevent slideshow from wrapping

Outros exemplos e uma documentação maior pode ser visto no site do plugin.

42 thoughts on “Como criar um slideshow usando Jquery e o Plugin Cycle em 3 minutos

  1. oi..meu amigo…por favor me ajude..nao entendi nada desse post e o pior é que eu preciso muito..por favor me ajude ou explique passo a passo mais detalhadamente…sou noob nessa area..abraçao e belo site…

  2. Olá amigo.
    Sou um tanto leigo no assuntoe não cheguei a entender o script acima.
    Pergunto-lhe:
    em que local da página HTML será colocado cada um desses tres scripts?
    Agradeço sua informação.

  3. Parabéns amigo.
    Gostei muito do artigo, fiquei satisfeito demais com os efeitos do jQuery, antigamente eu ficava pegando scripts aqui e ali, hj eu leio bastante sobre o assunto pra poder fazer eu mesmo meus scripts.
    Continue assim, bastante esclarecedor seu artigo.

  4. é amigo…
    já cozinhei uma feijoada, e até agora não funcionou.
    uma dúvida: eu posso usar junto a um outro script, para gerar as imagens aleatóreamente?

  5. A pessoal gostaria depedir uma dica de com inserir icones de navegação no slide show ..next e prev tipo o do lightbox

  6. Gostei do post, mas fiquei interressado mesmo em saber como foi que voce fez aquela nuvem de tags do seu site, será que não teria como voce fazer um tutorial.

  7. Tem como colocar link nas imagens?? eu pretendo usar como banner na home de um site que precisa ter link.

    Grato.

  8. fiz mas deu um erro no $(‘#galeria1’)
    o objeto não dá suporte para a propriedade ou método

  9. por favor publica como você fez essa LINDA nuvem de tags!!!
    Não sou só eu q estou pedindo … me avisa quando publicar ok?

  10. Ola gostaria de saber como eu faço em um slide show aquele efeito de paginaação ou seja conforme vai passando a foto passa também os números por exemplo 1 2 3 4 etc comforme psa a transição muda de cor os numeros
    jafiz o slide show tudo certo com jquery só falta isso

  11. Olá, não consigo fazer esse códifo funcionar. Pode me ajudar. Preciso muito dele.

    Além disso gostaria de saber como inserir ícones para as funções do slide.

    Aguardo.

  12. Digo, o javascript que está no quarto bloco de códigos também deve ser incluindo no arquivo html, para que funcione.

  13. Incluir, também, no arquivo html:

    De preferência hospedar esses arquivos em seu servidor.

    Não achei aí. Não funciona sem isso.

  14. Atribuir aos arquivos jquery.min.js e jquery.cycle.all.2.74.js, isso que quis dizer. Não foi.

  15. aH eu conseguir mais fiz algums mudança pq nao tava dando certo
    pra qua nao conseguio vou deixar o codigo HTML e CSS vc podem tbem usar o dremoweaver é so copiar e colar !

    Untitled Document

    $(function () {
    $(“#slides ul”).cycle ({

    fx: ‘fade’,
    speed: 2000,
    timeout: 4000,
    })
    })

    O CODIGO CSS AGORA

    *{margin:0; padding:0;}

    #slides{
    width:500px;
    height:300px;
    margin:0 auto;
    overflow:hidden;
    }

    PRONTO !!!!!!!!!!!!!

    PRA QUEM NAO SABE CRIAR ARQUIVO HTML é simples é so entrar no dremoweaver e clicar novo escolher a opção HTML
    e o CSS é a mesma coisa ! é so da uma olhada nos video aula do youtube !

    ([email protected])

  16. Cara, muito bom seu post, bem simplificado. so que ja preocurei em todos lugares, gostaria de um slide igual ao primeiro, so que sem fotos, somente com bloco de texto. para ir passando de um bloco de texto para outro. vc terria um exemplo, ou teria como modificar o primeiro exemplo…. desde ja agradeco.

  17. Cara gostei muito do seu post, estou começando agora com jquery,
    e gostaria de saber se eu posso utilizá-lo com o cycle em algumas aplicações comerciais?
    vlw

  18. Ótima dica vlww aeww =D, muito simples de implementar.
    Pra o pessoal que esta precisando de outras funcionalidades entrem no site oficial lá tem a documentação completa.

  19. Cara,

    Estou fanzendo este slide com pngs no entanto esse plugin está adcionando uma borda preta em volta das imagens com fundo trasparente.

    Tem como resolver isso?

  20. Obrigado por compartilhar! :D

    Estou com um problema para exibir o SlideShow no site: egirassol.com ao abrir o Post… Na index o Slide é exibido normal, mas quando entro em uma postagem do Site as imagens do Slide não é mais exibida… Apenas os links!

    Porque isso esta acontecendo? Como posso resolver esse problema?

    Vlw!!!

  21. hum agora vou pedir sua ajuda pois tentei fazer tudo conferme vc mostrou enão funcionou apareçe as imagens mais o slide não funciona tem como vc mim ajudar preciso muito criar este slide para meu site

  22. Olá, o meu não deu certo…
    As imagens não correm, abrem uma ao lado da outa!
    Alguém pode me ajudar?!
    Grata

  23. O plugin é para slide de imagens. Imagens, não texto. É como perguntar se o gato que a vizinha ta doando pode latir. Esse exemplo ta mal feito, mal explicado… enfim, entrem no site do plugin (http://jquery.malsup.com/cycle), existem diversos exemplos do básico ao avançado.

  24. Galera to com uma duvida nesse plugin, aqui nao ta funcionando
    o slide vai pegar independente do caminho do arquivo,
    porque aqui eu fiz igual e nao pegou, mas o caminho dos meus arquivos de imagens sao: “image/01.jpg, image/02.jpg ….”
    entenderam. será que é por isso que nao ta pegando
    me ajudem plis=) desde ja obrigado

  25. Muito bom o post que você fez, funciona que é uma “belezura”!

    Agora eu gostaria de saber como faço para criar um guias e paginação para as imagens, por exemplo:

    <>

    Outra coisa, é possível ocultar o endereço das imagens?

    Desde já agradeço.

  26. Olá, já utilizo o jquery cycle mas o problema é, como posso utiliza-lo com google sites ?
    Pois já tentei hospedar o aquivo jquerycycle.js no site e tentar puxar o link mas não funciona, você saberia me informar como utilizar ?

    abraço,

    Obrigado!

    Luiz Bruno

  27. Só principiante na paginação web e não tenho site no ar.
    estou a desenvolver um site com html e nao consigo colocar o slide
    quero uma juda

Leave a Reply

Your email address will not be published. Required fields are marked *