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>
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>
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.
Danilo gosta de novas tecnologias é focado em HTML5 / Javascript.
October 17th, 2008 at 5:08 am
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…
October 22nd, 2008 at 8:28 pm
Jquery é foda mesmo vei!!!
Esse slideshowl tá foda!!!
Valeu!!!
December 13th, 2008 at 6:56 pm
Parabéns muito legal este post, alias todo o site é show.
Abs,
December 27th, 2008 at 2:44 pm
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.
February 24th, 2009 at 11:58 am
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.
April 16th, 2009 at 11:42 am
é 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?
June 1st, 2009 at 4:27 pm
A pessoal gostaria depedir uma dica de com inserir icones de navegação no slide show ..next e prev tipo o do lightbox
June 11th, 2009 at 11:14 am
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.
July 17th, 2009 at 2:37 pm
OMG
era o eu tava precisando ;)
muito bom, eu levei menos de 3 minutos xD
December 1st, 2009 at 4:47 pm
Tem como colocar link nas imagens?? eu pretendo usar como banner na home de um site que precisa ter link.
Grato.
December 3rd, 2009 at 3:00 pm
fiz mas deu um erro no $(‘#galeria1′)
o objeto não dá suporte para a propriedade ou método
December 6th, 2009 at 6:03 pm
por favor publica como você fez essa LINDA nuvem de tags!!!
Não sou só eu q estou pedindo … me avisa quando publicar ok?
January 13th, 2010 at 7:42 pm
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
January 22nd, 2010 at 5:56 pm
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.
August 14th, 2010 at 1:14 am
Pessoal, o amigo só não mencionou que o javascript na página
August 14th, 2010 at 1:16 am
Digo, o javascript que está no quarto bloco de códigos também deve ser incluindo no arquivo html, para que funcione.
October 17th, 2010 at 2:16 pm
Incluir, também, no arquivo html:
De preferência hospedar esses arquivos em seu servidor.
Não achei aí. Não funciona sem isso.
October 17th, 2010 at 2:17 pm
Atribuir aos arquivos jquery.min.js e jquery.cycle.all.2.74.js, isso que quis dizer. Não foi.
October 17th, 2010 at 2:27 pm
Funcionou comigo inserindo o código da primeira caixa na tag body.
October 18th, 2010 at 9:34 am
Muito fácil. valeu!
November 4th, 2010 at 2:26 pm
não consigo intender nada, não sei o que tem que ser baixado exatamente, nada.
November 26th, 2010 at 10:11 am
Preciso de ajuda, fiz tudo como pedem, mas só funciona no IE, preciso que funcione tb no CHROME e FF.
January 13th, 2011 at 10:26 pm
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 !
(cado.paulo@hotmail.com)
January 29th, 2011 at 12:27 am
*`~ I am really thankful to this topic because it really gives great information ~.-
March 10th, 2011 at 6:55 pm
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.
May 18th, 2011 at 6:15 am
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
June 1st, 2011 at 1:15 pm
Ó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.
June 24th, 2011 at 1:40 pm
Curti esse seu post, me ajudou muito… vlw
June 30th, 2011 at 7:01 pm
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?
August 1st, 2011 at 11:15 am
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!!!
October 10th, 2011 at 4:41 pm
Olá !! poderia me ajudar não está funcionando comigo, já tentei de várias formas mas o javascript não funfa =/
January 7th, 2012 at 2:19 pm
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
March 8th, 2012 at 11:25 am
Olá, o meu não deu certo…
As imagens não correm, abrem uma ao lado da outa!
Alguém pode me ajudar?!
Grata
March 20th, 2012 at 5:10 pm
Cara, isso tem como usar para conteúdo ao invés de imagens?
May 3rd, 2012 at 9:55 pm
Parabéns isso foi muito útil para mim
May 4th, 2012 at 5:58 pm
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.
July 7th, 2012 at 6:14 pm
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
December 11th, 2012 at 8:57 am
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.
February 18th, 2013 at 12:48 am
Muito bom o post, muito fácil de entender, só não consegui terminar antes do miojo pois os .js não funcionaram…
eu utilizei estes no lugar e deu certo:
OBS: peguei estes no site http://jquery.malsup.com/cycle/begin.html
March 16th, 2013 at 9:09 pm
Eu tentei várias vezes fazer por esse modo e não deu certo.
Daí eu descobri que existe uma versão mais recente do plugin cycle,que é o cycle2.
Se alguém tiver dúvida,fiz um tutorial bem facinho:
http://inquebravel.suicide-queen.com/criar-slide-com-jquery-e-plugin-cycle2/
Bjs