Slideshow com jQuery
Postado por: Pedro Rogério em
Nesse tutorial vamos aprender a desenvolver um simples Slideshow de imagens com a utilização do jQuery que pode ser aplicado em diversos lugares devido a sua simplicidade. Esse tutorial foi criado originalmente por Jon Raasch. Inclusive é ele que uso aqui no meu site para mostrar meu portifólio.
Repare na simplicidade do HTML:
<div id="slideshow">
<img class="active" src="images/image1.jpg" alt="" title="" />
<img src="images/image2.jpg" alt="" title="" />
<img src="images/image3.jpg" alt="" title="" />
<img src="images/image4.jpg" alt="" title="" />
</div>
Basicamente você irá precisar de uma div, e dentro da mesma é onde você irá colocar as imagens para as transições, coloque quantas desejar. Somente adicione a classe active a primeira imagem.
Algumas considerações também devem ser feitas no CSS para que ele funcione corretamente, elas serão listadas abaixo:
#slideshow {
position:relative;
height:376px;
width:490px;
margin:0 auto;
}
#slideshow img {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow img.active {
z-index:10;
}
#slideshow img.last-active {
z-index:9;
}
Na div #slideshow é onde você deve definir a altura e largura do box que irá conter as imagens. Se as imagens tiverem o mesmo tamanho seu slideshow ficará mais elegante. Agora, o JavaScript, que como podem ver, também é muito simples:
function slideSwitch() {
var $active = $('#slideshow img.active');
$active.addClass('last-active');
// verifica se existe um próximo objeto na div #slideshow, caso ele nao exista, retorna para o primeiro
var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
// Codigo que define as transicoes entre as imagens
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
//Executa a função a cada 5 segundos
setInterval( "slideSwitch()", 5000 );
});
Vejam agora o exemplo do Slideshow.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
matou a pau nesse hein…..parabens
Muito legal, bom trabalho cara..sou iniciante nessa aventura que é a WEB, mas apaixonado pelo que ela oferece. Parabéns.
Olá Pedro, eu sou iniciante em desenvolvimento pra web, testei esse slideshow, mas quando tentei adicionar um link a imagem, a mesma parou de ser exibida no slideshow, pq isso acontece? e teria como corrigir?
Abração
Paulo,
Você pode ver esse Slideshow com link em funcionamento aqui:
http://www.pinceladasdaweb.com.br/
Olá, tudo blza?
Cara, eu não consigo fazer funcionar esse slideshow, já verifiquei umas 10 vezes o código todo e nada de funcionar.
Dá uma luz ae!!
flws
Você tem que colocar o javascript antes do head
e linkar o jquery-1.2.6.min.js.
faça o download deste arquivo que tem tudo
ai vc estuda.
http://jonraasch.com/downloads/simple-jquery-slideshow.zip
Pronto. Ensinei pescar, dei o peixe. rsrrsr
Abraço!
Eu também tive que baixar o arquivo pois tem o arquivo citado acima que esta faltando
Em primeiro lugar, meus parabéns pela materia, acompanho esse blog a algum tempo e essa não é a primeira vez que uso no meu trabalho algo que aprendi aqui…
Agora uma duvida
Estou com o slideshow funcionando muito bem em uma pagina aqui,
porem, tenho tbm um menu dropdown vertical que precisa ficar logo acima da div
do slideshow, o que esta acontecendo é que s slides sempre ficam cobrindo a droplist do meu menu, alguem sabe como resolver?
Abraços!
Vinicius,
Já experimentou definir z-index para o elementos do seu menu?
Tenho uma página que mostra uma lista de 5 imagens em cada imagem deveria mostrar um slide com outras imagem, mas não funciona ele mostra sempre o slide da primeiro imagem, e quando dou um clique nas outras imagem sempre mostra as mesmas imagens, conclusão o slide só funciona em uma imagem na página.
Gosto muito do JCycle, com ele consigo comtemplar praticamente todas possibilidades de slideshow.
Ok, você salvou a minha vida.
Não sei como você conseguiu ok?
Já tentei smooth gallery/noob slideshow e qualquer tipo de Jcycle…
NADA!!!!!!!!!!!!!!!!!!!!!!!!
E quando eu conseguia instalar um slideshow as imagens ficavam todas uma em baixo da outra na parte da edição e e não conseguia suportar isto.
E o teu tutorial funfou tranquilamente.
obrigado!
Olá, achei muito legal esse artigo, era o que eu estava buscando aprender.
Realizando a implementação no meu site, as imagens não se alteram. Ele carrega a primeira e ela mantém-se estática.
Já adicionei as tags no XHTML, já inseri o CSS e já criei o link dentro do index para o arquivo JQuery 1.2.6. Tenho que fazer mais alguma coisa pra funcionar? Modificar mais alguma coisa?
Poderiam me esclarecer?
Desde já agradeço se puderem ajudar e parabéns pelo site, têm me ajudado bastante!!
Amigos, achei o erro…
era um “.” em um local errado, rs!!
Olá,
já tenho usado esse seu exemplo em alguns projetos, no entanto agora preciso que o slideshow tenha um botão de previous e next. Gostaria de saber se com base nesse seu exemplo daria para criar algo do tipo?
Muito Obrigo!
Olá,
Estou tentando usar o script deste tutorial que é muito bom por sinal, porém só esta funcionando localmente quando faço upload para o servidor as imagens não trocam
da pra dar uma força.
http://www.admutua.com.br/slide.php
Achei muito bom esse script!
Mas veja se consegue me ajudar…
Como faço para colocar um botão de next e previous?
To tentando mas não tenho obtido sucesso!
Tenho que dizer que sou inciante em jquery!
Se alguém puder, fico grato!
Abs
[...] lembram que eu já ensei por aqui a desenvolver facilmente um slideshow com jQuery, ótimo para ser usado em portifólios. Dessa vez vou ensinar mais uma vez a desenvolver um [...]
Usei em menos de 5 minutos e consegui o efeito desejado.
Fera!
Abraço.
Pedro,
funcionou perfeitamente,
parabéns pelo post, excelente.
Olá!
O Slideshow funcionou numa boa, porém, ao inserir link nas imagens ele para de funcionar. Você tem uma solução, já tentei adicinar este linha de comando, mas não foi…
var $next = $active.parent().next().children(‘img’).length ? $active.parent().next().child(‘img’)
: $(‘#slideshow IMG:first’);
Abraço!
Valeu pelo script! Funcionando bem!
Abraços
Ótima técnica… muito fácil de entender. Interessante a ideia de usar o z-index pra fazer a rotação das imagens. Valeu!
Vinicius,
Ótimo artigo, mas se ao invés de carregar imagens, como a maioria dos exemplos na web, eu quisesse carregar um arquivo html, como poderia ser feito ?
Olá amigo, seu slideshow deu certo aqui, porém tô com um problema que provavelmente é besta, mas eu estou começando agora e estou me batendo um pouco…
Não consigo posicionar o slide aonde eu quero que ele fique…
Tenho que colocar ele embaixo do menu em uma div que já estava criada. Coloquei o código das imagens com as divs dentro dessa minha div que eu havia criado antes… Mas o slide fica lé em cima do site, no topo…. ja tentei organizar mas não consigo…
Me dá uma luz por favor!
Natan,
Adiciona position:relative a essa div que já foi criada antes.
Oi,
Muito bom o seu post, mas quando tentei fazer no meu site (utilizando EXATAMENTE seu código), só aparece a primeira imagem, estática. Tentei no Chrome e no Firefox e o efeito foi o mesmo.
O que fazer???
Olá Pedro!
Gostaria de saber se é possível vc explicar como colocar link nas imagens desse slide show! Olhei o exemplo do seu site mas não consegui entender…
Agradeço desde já!
Basta colocar os links nas imagens, e no CSS e JS ao invés de aplicar o CSS ao img, aplique a tag a. O mesmo deve ser feito no JavaScript.
Pedro,
Nem sei como agradecer. Segui sua dica e agora tah normal! Parabéns pelo trabalho e por compartilhar seu conhecimento!
vlw!
Show de bola. É muito mais simples do que o nivo slide e o co-slider. Valeu.
otimo slide, e mt bem explicado, ajudou muito…
obs: ao adicionar link as imagens o slide fica totalmente desregulado, se alguém teve o mesmo problema e conseguiu resolver poderia me dar a dica? (:
Ótimo tuto , e excelente slide. Obg.
Há alguma maneira de deixar esse slider, redimensionável de acordo com o browser tipo o site da paparazzo.com.br
Olá! Sou meio que iniciante em desenvolvimento de sites e em java script/jquery… Tudo funcionou direitinho, mas agora tá aparecendo um erro chamado Z-Index Bug dentro do conteúdo da div do slideshow, quando adicionei mais imagens.
No IE, o slide não muda! Fica estático somente na primeira imagem… Tem algo que eu possa fazer para resolver essas coisas?! No chrome fica perfeito, no firefox tbm!
Outra coisinha ;D nesse código daria para colocar de alguma forma aquelas setinhas para voltar a imagem ou ir para a próxima?!
Obrigada!!
Olá,
Parabéns pelo belo trabalho.
Belo tutorial.
Ficou show!
Fiz tudo certo, mas as imagens não mudam! Fica so uma!