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!
Eu posso usar class na div slideshow, ao invés de id?
Se sim, basta eu substituir #slideshow no css e no js por .slideshow que vai funcionar corretamente?
Aguardo resposta, e obrigado por esse belo script *—–*
Ah, pode deixar, testei aqui e funcionou como eu esperava *—–*
Muito bom, excelente trabalho!