A utilização de slideshows na internet é bastante utilizada, dado que permite de uma forma apelativa e interativa apresentar imagens.
No entanto, quando estamos atentos ao peso do website na Internet, preocupa-nos a sua utilização. Tecnologias como Flash ou javascript acabam por pecar por isso mesmo.
O CSS3 vem permitir isso mesmo: além de variadíssimas outras coisas, criar slideshows com recurso a apenas HTML.
Hoje apresentamos um tutorial sobre a criação de um slideshow com recurso a HTML5 e CSS3.
Código HTML:
<body>
<section>
<nav>
<ul>
<li><a href=”#img01″>1</a></li>
<li><a href=”#img02″>2</a></li>
<li><a href=”#img03″>3</a></li>
<li><a href=”#img04″>4</a></li>
<li><a href=”#img05″>5</a></li>
</ul>
</nav>
Entre as tags <nav></nav> inserimos os links, que serão depois formatados no css para ganhar a forma de botões, que nos permitirão navegar pelas imagens. Tratam-se de links anchor (daí o uso do símbolo #) que nos permitem navegar para locais diferentes dentro da mesma página. Cada imagem ou tag que incorporará a imagem terá depois de receber um ID com o mesmo nome, sem o símbolo #.
<article id=”img01″>
<figure>
<img src=”imagens/01.jpg” alt=”paisagem 1″>
</figure>
</article>
Dentro de cada <article></article> com ID igual ao link anchor será inserida uma outra tag <figure></figure> que irá receber a tag <img src/> por cada imagem do slideshow.
Este bloco de código será repetido de acordo com a quantidade de imagens a inserir.
O código html final:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<title>CSS Slide Show</title>
<link href=”estilos.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<section>
<nav>
<ul>
<li><a href=”#img01″>1</a></li>
<li><a href=”#img02″>2</a></li>
<li><a href=”#img03″>3</a></li>
<li><a href=”#img04″>4</a></li>
<li><a href=”#img05″>5</a></li>
</ul>
</nav>
<article id=”img01″>
<figure>
<img src=”imagens/01.jpg” alt=”paisagem 1″>
</figure>
</article>
<article id=”img02″>
<figure>
<img src=”imagens/02.jpg” alt=”paisagem 2″>
</figure>
</article>
<article id=”img03″>
<figure>
<img src=”imagens/03.jpg” alt=”paisagem 3″>
</figure>
</article>
<article id=”img04″>
<figure>
<img src=”imagens/04.jpg” alt=”paisagem 4″>
</figure>
</article>
<article id=”img05″>
<figure>
<img src=”imagens/05.jpg” alt=”paisagem 5″>
</figure>
</article>
</section>
</body>
</html>
Se não usarmos código CSS, as imagem serão apresentadas todas em simultâneo. O CSS permite mostrarmos ou escondermos as camadas de acordo com o que pretendemos.
Código CSS:
Começamos pelos links da navegação. O objetivo é transformar simples links em botões, tornando a navegação pelas imagens mais intuitiva.
nav {
margin-op:60px;
left:0;
right:0;
z-index: 20;
background: #fff;
position: absolute;
}
nav li {
display: inline;
padding-right: 1em;
}
nav a {
background:#339999;
padding: 5px 10px;
border-radius: 3px;
color:#FFF;
font-weight: bold;
text-decoration: none;
}
nav a:hover{
background: #339999;
}
De seguida posicionamos a tag principal que recebe todo o conteúdo, tendo em conta o tamanho das imagens. Cada imagem tem uma largura de 500px e uma altura de 333px. A propriedade overflow: hidden permite manter a camada escondida.
.slideshow {
margin:auto;
padding-top:160px;
position: relative;
height: 333px;
width: 500px;
overflow: hidden;
}
Cada tag <article> que contém cada uma das imagens, apresenta-se inicialmente escondida. Assim e coordenando com a propriedade .target:target vamos mostrando cada uma das imagens sequencialmente.
.target {
position: absolute;
top: 160px;
right:500px;
height: 333px;
width: 500px;
overflow: hidden;
}
.target:target {
left:-100px;
}
O código CSS final:
@charset “utf-8”;
body{
margin:auto;
text-align:center;
}
nav {
margin-op:60px;
left:0;
right:0;
z-index: 20;
background: #fff;
position: absolute;
}
nav li {
display: inline;
padding-right: 1em;
}
nav a {
background:#339999;
padding: 5px 10px;
border-radius: 3px;
color:#FFF;
font-weight: bold;
text-decoration: none;
}
nav a:hover{
background: #339999;
}
.slideshow {
margin:auto;
padding-top:160px;
position: relative;
height: 333px;
width: 500px;
overflow: hidden;
}
.target {
position: absolute;
top: 160px;
right:500px;
height: 333px;
width: 500px;
overflow: hidden;
}
.target:target {
left:-100px;
}
O resultado no Browser pode ser visualizado no link abaixo.
gostei dos codigos me ajudaram muito
não consigo fazer o download dos ficheiros
Olá Vanessa,
Ainda bem que nos avisou deste lapso. Pode tentar agora.
Abraço
2bdesign
nao consigo fazer o download dos ficheiros
Olá Lourenço,
o link está a funcionar perfeitamente, testei agora mesmo. Recebe algum erro? O que acontece?
Tente directamente com este link:
http://lumfile.com/abhl34ixgz7f/slideshow.rar.html
2bdesign
Valeu pelo tutorial me ajudou muito.
Como fazer para que as imagens “troquem” automaticamente sem a necessidade de clicar nos links (botões)?
Olá Fábio,
Para criarmos um slideshow só com recurso a css e html e ainda fazermos transições automáticas, temos de utilizar o novo potencial do css que são as animações com keyframes.
Dado que este é um tema com elevado interesse, vamos colocar um tutorial sobre como criar um slideshow em css com transições automáticas. Pode vir visitar o nosso site muito em breve para ter um tutorial à medida das suas necessidades.
Abraço
2bdesign
Ele pode ser usado em qualquer plataforma?no meu caso uso a do lojas virtuais br poderei instalar isso lá dessa forma?
Olá Vanessa,
Sim, este código pode ser utilizado em qualquer plataforma, dado que todas as páginas Web consomem código HTML e CSS. A única limitação poderá existir em alguns browsers mais antigos.
2bdesign
Ola meu caro amigo…muito bom seu slide.
Venho aqui pedir uma ajuda.,,
neste site: http://travel.yahoo.com/…voce podera observer que tem um campo “” Destinations”” tem um slide. Um Slideshow com pequeno texto (link) e botoes volta-play/pause-avancar ,, alem dos link destro do slide.
Poderia ajudar a criar um assim.
Muito obrigado
parabens pelo site.
Junior
Olá José,
Agradecemos muito os seus comentários. Relativamente ao que procura, muito em breve publicaremos um tutorial sobre mais um slideshow bastante idêntico ao que procura. Subscreva os nossos Feeds ou siga-nos no Twitter para ser informado acerca das nossas publicações.
Abraço
2bdesign
O link para Download Não está funcionando
:/
Olá Tiago,
Obrigado por nos avisar desta situação. O link foi atualizado e pode descarregar os ficheiros.
Um abraço
2bdesign
Apenas vim postar para elogiar o seu trabalho, Parabéns! Continue assim!
Obrigado Marcio!
2bdesign
beleza
Ei mano esse códio css onde coloco ele no html?
esses códigos funcionam juntos?
quero um código que faça um slideshow ou seja as imagens fiquem passando automaticamente …
nesse código html elas ficam uma em cima da outra e tem uns links em cima pra clicar e ir direto a imagem, isso não é um slideshow a princípio…
Obrigado
Olá Cassiano,
Faça o download dos ficheiros no fim do artigo para ver como colocar o código.
Bom trabalho.
2Bdesign
Muito bom =D, so que voutentar usar com link de video de youtube.
Teria como fazer isso tbm com texto e imagem?
Olá Cleber,
Para usar com texto imagem, siga antes este tutorial:
http://www.blog.2bdesign.net/css-slideshow-com-controlos/
abraço
2Bdesign
teria como fazer esse msm slide mas com a penas um botao de ida e de volta ?
Olá Domicio Lobo,
Para fazer o slideshow com controlos simples como pretende, pode seguir este tutorial publicado aqui no 2B Design:
http://www.blog.2bdesign.net/css-slideshow-com-controlos/
Bom trabalho!
2Bdesign
Boa tarde
parabéns pela explicação clara e concisa…
Vou ter que deixar um recado agradeçendo. Muito Obrigado pelo codigo, me economizou muito tempo. Abraço
Preciso um que seja automatico, ou preciso colocar um meta refresh ??
OBRIGADO!
Olá Elistor,
Temos disponível para consulta tutoriais para slideshow automático:
http://www.blog.2bdesign.net/slideshowmore-390/#more-390
http://blog.2bdesign.net/tutoriais/autoslideshow/
Veja se ajudam naquilo que pretende.
Abraço!
2Bdesign
Como fazer a imagens aparecerem acima dos botões numéricos?
Olá Francisco,
Para que a barra de navegação (botões numéricos) surjam abaixo das imagens, no código HTML, deve colocar o códigoque se encontra entre as TAG nav /nav (inclusivé) antes da tag /section
Abraço
2Bdesign
otimo, perfeito era isso msm q tava precisando, obrigado
abçs
Elistor.