Slideshow com CSS e HTML


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;

}

ADrive

 

 

 

O resultado no Browser pode ser visualizado no link abaixo.

Ver Demo                                           Download


Publicado por: 2bdesign


31



  1. Ndongala diz:

    gostei dos codigos me ajudaram muito

  2. vanessa diz:

    não consigo fazer o download dos ficheiros

  3. 2bdesign diz:

    Olá Vanessa,
    Ainda bem que nos avisou deste lapso. Pode tentar agora.
    Abraço

    2bdesign

  4. lourenco diz:

    nao consigo fazer o download dos ficheiros

  5. 2bdesign diz:

    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

  6. Taylor diz:

    Valeu pelo tutorial me ajudou muito.

  7. Fabio Lima diz:

    Como fazer para que as imagens “troquem” automaticamente sem a necessidade de clicar nos links (botões)?

  8. 2bdesign diz:

    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

  9. vanessa diz:

    Ele pode ser usado em qualquer plataforma?no meu caso uso a do lojas virtuais br poderei instalar isso lá dessa forma?

  10. 2bdesign diz:

    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

  11. Jose diz:

    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

  12. 2bdesign diz:

    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

  13. Tiago Afonso diz:

    O link para Download Não está funcionando
    :/

  14. 2bdesign diz:

    Olá Tiago,
    Obrigado por nos avisar desta situação. O link foi atualizado e pode descarregar os ficheiros.
    Um abraço
    2bdesign

  15. Marcio diz:

    Apenas vim postar para elogiar o seu trabalho, Parabéns! Continue assim!

  16. 2bdesign diz:

    Obrigado Marcio!
    2bdesign

  17. Cassiano diz:

    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

  18. 2bdesign diz:

    Olá Cassiano,

    Faça o download dos ficheiros no fim do artigo para ver como colocar o código.

    Bom trabalho.
    2Bdesign

  19. ismael diz:

    Muito bom =D, so que voutentar usar com link de video de youtube.

  20. cleber diz:

    Teria como fazer isso tbm com texto e imagem?

  21. 2bdesign diz:

    Olá Cleber,

    Para usar com texto imagem, siga antes este tutorial:

    http://www.blog.2bdesign.net/css-slideshow-com-controlos/

    abraço
    2Bdesign

  22. Domicio lobo diz:

    teria como fazer esse msm slide mas com a penas um botao de ida e de volta ?

  23. 2bdesign diz:

    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

  24. kenny diz:

    Boa tarde
    parabéns pela explicação clara e concisa…

  25. Lucas diz:

    Vou ter que deixar um recado agradeçendo. Muito Obrigado pelo codigo, me economizou muito tempo. Abraço

  26. ELISTOR diz:

    Preciso um que seja automatico, ou preciso colocar um meta refresh ??

    OBRIGADO!

  27. 2bdesign diz:

    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

  28. Francisco das Chagas diz:

    Como fazer a imagens aparecerem acima dos botões numéricos?

  29. 2bdesign diz:

    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

  30. ELISTOR diz:

    otimo, perfeito era isso msm q tava precisando, obrigado

    abçs

    Elistor.


Faça um comentário