CSS Slideshow com controlos


templateEstamos a constatar que os profissionais e entusiastas da Web procuram todo o tipo de slideshow para embelezar os seus sites das mais variadas formas. Queremos por isso abranger todas as necessidades, ainda que isso seja bastante difícil.

De qualquer forma, e a pedido dos nossos leitores, aqui vai mais uma versão de um slideshow, mais uma vez utilizando apenas as linguagens CSS e HTML, mas agora com legendas e controlos de navegação.

Principal estrutura do HTML:

<div id=slides>

<div id=overflow>

<div>

<article>

<div><h3>Flor selvagem 1</h3>

<a href=”http://www.blog.2bdesign.net”>2bDesign</a>

</div>

<img src=”imagens/img1.jpg” />

</article>

<article>

<div><h3>Flor selvagem 2</h3><a href=”http://www.blog.2bdesign.net”>2bDesign</a></div>

<img src=”imagens/img2.jpg” />

</article>

<article>

<div><h3>Flor selvagem 3</h3><a href=”http://www.blog.2bdesign.net”>2bDesign</a></div>

<img src=”imagens/img3.jpg” />

</article>

<article>

<div><h3>Flor selvagem 4</h3><a href=”http://www.blog.2bdesign.net”>2bDesign</a></div>

<img src=”imagens/img4.jpg” />

</article>

<article>

<div><h3>Flor selvagem 5</h3><a href=”http://www.blog.2bdesign.net”>2bDesign</a></div>

<img src=”imagens/img5.jpg” />

</article>

</div>

</div>

</div>

Repare que a estrutura é bastante simples, sendo que cada secção entre as TAGS <article> </article> se repetem tantas as vezes quantos os slides necessários.

Principal estrutura do CSS:

#overflow {

width:680px;

overflow: hidden;

}

 

article img {

width:680px;

}

 

#slides .inner {

width: 500%;

line-height: 0;

}

 

#slides article {

float: left;

}

 

.info {

width:620px;

height:50px;

background-color:#000;

line-height: 20px;

margin: 220px 0 0 0;

position: absolute;

padding: 30px 30px;

opacity: 0;

color:#FFF;

text-align: left;

}

 

.info h3 {

color:#CCC;

margin: 0 0 5px;

font-weight: normal;

font-size: 22px;

font-style: normal;

}

#slides {

width:680px;

margin: 0 auto;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

box-shadow: 1px 1px 4px #666;

padding: 1%;

background:#E1E1E1;

}


Inserir botões de controlo:

 Os botões de controlo serão ativados logo no início do código HTML com radio buttons (tantos quantos os slides)…

 

<input checked type=radio name=slider id=slide1 />

<input type=radio name=slider id=slide2 />

<input type=radio name=slider id=slide3 />

<input type=radio name=slider id=slide4 />

<input type=radio name=slider id=slide5 />

 

…e no final do código com labels (tantos quantos os slides).

 

<div id=controls>

 

<label for=slide1></label>

<label for=slide2></label>

<label for=slide3></label>

<label for=slide4></label>

<label for=slide5></label>

</div>

<div id=active>

 

<label for=slide1></label>

<label for=slide2></label>

<label for=slide3></label>

<label for=slide4></label>

<label for=slide5></label>

 

</div>

 

Código CSS para comandar os controlos:

 

#slide1:checked ~ #slides .inner { margin-left:0; }

#slide2:checked ~ #slides .inner { margin-left:-100%; }

#slide3:checked ~ #slides .inner { margin-left:-200%; }

#slide4:checked ~ #slides .inner { margin-left:-300%; }

#slide5:checked ~ #slides .inner { margin-left:-400%; }

 

#controls {

margin:-230px auto;

width: 850px;

height: 50px;

}

 

#controls label {

display: none;

width: 42px;

height: 46px;

opacity: 0.3;

}

 

#active {

margin: 23% 0 0;

text-align: center;

}

 

#active label {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

display: inline-block;

width: 10px;

height: 10px;

background: #bbb;

}

 

#active label:hover {

cursor:pointer;

background: #ccc;

border-color: #777 !important;

}

 

#controls label:hover {

opacity: 0.8;

cursor:pointer;

}

 

#slide1:checked ~ #controls label:nth-child(2),

#slide2:checked ~ #controls label:nth-child(3),

#slide3:checked ~ #controls label:nth-child(4),

#slide4:checked ~ #controls label:nth-child(5),

#slide5:checked ~ #controls label:nth-child(1) {

background-image:url(imagens/direita.png);

background-repeat:no-repeat;

float: right;

margin: 0 0 0 0px;

display: block;

}

 

 

#slide1:checked ~ #controls label:nth-child(5),

#slide2:checked ~ #controls label:nth-child(1),

#slide3:checked ~ #controls label:nth-child(2),

#slide4:checked ~ #controls label:nth-child(3),

#slide5:checked ~ #controls label:nth-child(4) {

background-image:url(imagens/esquerda.png);

background-repeat:no-repeat;

float:left;

margin: 0 0 0 0px;

display: block;

}

 

#slide1:checked ~ #active label:nth-child(1),

#slide2:checked ~ #active label:nth-child(2),

#slide3:checked ~ #active label:nth-child(3),

#slide4:checked ~ #active label:nth-child(4),

#slide5:checked ~ #active label:nth-child(5) {

background: #333;

border-color: #333 !important;

}

E por fim as animações de comandos e transições de slides e informação:

 

#slides .inner {

-webkit-transform: translateZ(0);

-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);

-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);

-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);

-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);

transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);

 

-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);

-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);

-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);

-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);

transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);

}

 

 

#controls label{

-webkit-transform: translateZ(0);

-webkit-transition: opacity 0.2s ease-out;

-moz-transition: opacity 0.2s ease-out;

-o-transition: opacity 0.2s ease-out;

transition: opacity 0.2s ease-out;

}

 

#slide1:checked ~ #slides article:nth-child(1) .info,

#slide2:checked ~ #slides article:nth-child(2) .info,

#slide3:checked ~ #slides article:nth-child(3) .info,

#slide4:checked ~ #slides article:nth-child(4) .info,

#slide5:checked ~ #slides article:nth-child(5) .info {

opacity: 0.8;

-webkit-transition: all 1s ease-out 0.6s;

-moz-transition: all 1s ease-out 0.6s;

-o-transition: all 1s ease-out 0.6s;

transition: all 1s ease-out 0.6s;

}

 

.info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile {

-webkit-transform: translateZ(0);

-webkit-transition: all 0.5s ease-out;

-moz-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

}

Código HTML final:

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>Auto Slideshow</title>

<link href=”estilos.css” rel=”stylesheet” type=”text/css”>

</head>

 

<body>

<h1>Slideshow com controlos e legendas</h1>

 

<input checked type=radio name=slider id=slide1 />

<input type=radio name=slider id=slide2 />

<input type=radio name=slider id=slide3 />

<input type=radio name=slider id=slide4 />

<input type=radio name=slider id=slide5 />

<div id=slides>

<div id=overflow>

<div>

<article>

<div><h3>Flor selvagem 1</h3><a href=”http://www.blog.2bdesign.net”>2bDesign</a></div>

<img src=”imagens/img1.jpg” />

</article>

<article>

<div><h3>Flor selvagem 2</h3><a href=”http://www.blog.2bdesign.net”>2bDesign</a></div>

<img src=”imagens/img2.jpg” />

</article>

<article>

<div><h3>Flor selvagem 3</h3><a href=”http://www.blog.2bdesign.net”>2bDesign</a></div>

<img src=”imagens/img3.jpg” />

</article>

<article>

<div><h3>Flor selvagem 4</h3><a href=”http://www.blog.2bdesign.net”>2bDesign</a>

</div>

</article>

<article>

<div><h3>Flor selvagem 5</h3><a href=”http://www.blog.2bdesign.net”>2bDesign</a></div>

<img src=”imagens/img5.jpg” />

</article>

</div>

</div>

</div>

<div id=controls>

<label for=slide1></label>

<label for=slide2></label>

<label for=slide3></label>

<label for=slide4></label>

<label for=slide5></label>

</div>

<div id=active>

<label for=slide1></label>

<label for=slide2></label>

<label for=slide3></label>

<label for=slide4></label>

<label for=slide5></label>

</div>

</html>

Código CSS final:

 

@charset “utf-8”;

body{

text-align:center;

background:#999;

}

h1{

font-family: Verdana, Geneva, sans-serif;

font-size: 24px;

color: #999;

}

input {

margin:0 auto;

display: none;

}

#slide1:checked ~ #slides .inner { margin-left:0; }

#slide2:checked ~ #slides .inner { margin-left:-100%; }

#slide3:checked ~ #slides .inner { margin-left:-200%; }

#slide4:checked ~ #slides .inner { margin-left:-300%; }

#slide5:checked ~ #slides .inner { margin-left:-400%; }

 

#overflow {

width:680px;

overflow: hidden;

}

 

article img {

width:680px;

}

 

#slides .inner {

width: 500%;

line-height: 0;

}

 

#slides article {

float: left;

}

 

#controls {

margin:-230px auto;

width: 850px;

height: 50px;

}

 

#controls label {

display: none;

width: 42px;

height: 46px;

opacity: 0.3;

}

 

#active {

margin: 23% 0 0;

text-align: center;

}

 

#active label {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

display: inline-block;

width: 10px;

height: 10px;

background: #bbb;

}

 

#active label:hover {

cursor:pointer;

background: #ccc;

border-color: #777 !important;

}

 

#controls label:hover {

opacity: 0.8;

cursor:pointer;

}

 

#slide1:checked ~ #controls label:nth-child(2),

#slide2:checked ~ #controls label:nth-child(3),

#slide3:checked ~ #controls label:nth-child(4),

#slide4:checked ~ #controls label:nth-child(5),

#slide5:checked ~ #controls label:nth-child(1) {

background-image:url(imagens/direita.png);

background-repeat:no-repeat;

float: right;

margin: 0 0 0 0px;

display: block;

}

 

 

#slide1:checked ~ #controls label:nth-child(5),

#slide2:checked ~ #controls label:nth-child(1),

#slide3:checked ~ #controls label:nth-child(2),

#slide4:checked ~ #controls label:nth-child(3),

#slide5:checked ~ #controls label:nth-child(4) {

background-image:url(imagens/esquerda.png);

background-repeat:no-repeat;

float:left;

margin: 0 0 0 0px;

display: block;

}

 

#slide1:checked ~ #active label:nth-child(1),

#slide2:checked ~ #active label:nth-child(2),

#slide3:checked ~ #active label:nth-child(3),

#slide4:checked ~ #active label:nth-child(4),

#slide5:checked ~ #active label:nth-child(5) {

background: #333;

border-color: #333 !important;

}

 

.info {

width:620px;

height:50px;

background-color:#000;

line-height: 20px;

margin: 220px 0 0 0;

position: absolute;

padding: 30px 30px;

opacity: 0;

color:#FFF;

text-align: left;

}

 

.info h3 {

color:#CCC;

margin: 0 0 5px;

font-weight: normal;

font-size: 22px;

font-style: normal;

}

 

#slides {

width:680px;

margin: 0 auto;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

box-shadow: 1px 1px 4px #666;

padding: 1%;

background:#E1E1E1;

}

 

#slides .inner {

-webkit-transform: translateZ(0);

-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);

-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);

-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);

-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);

transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);

-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);

-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);

-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);

-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);

transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);

}

 

 

#controls label{

-webkit-transform: translateZ(0);

-webkit-transition: opacity 0.2s ease-out;

-moz-transition: opacity 0.2s ease-out;

-o-transition: opacity 0.2s ease-out;

transition: opacity 0.2s ease-out;

}

 

#slide1:checked ~ #slides article:nth-child(1) .info,

#slide2:checked ~ #slides article:nth-child(2) .info,

#slide3:checked ~ #slides article:nth-child(3) .info,

#slide4:checked ~ #slides article:nth-child(4) .info,

#slide5:checked ~ #slides article:nth-child(5) .info {

opacity: 0.8;

-webkit-transition: all 1s ease-out 0.6s;

-moz-transition: all 1s ease-out 0.6s;

-o-transition: all 1s ease-out 0.6s;

transition: all 1s ease-out 0.6s;

}

 

.info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile {

-webkit-transform: translateZ(0);

-webkit-transition: all 0.5s ease-out;

-moz-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

}

 

ADrive

 

 

 

O resultado no Browser pode ser visualizado no link abaixo.

Ver Demo Download ficheiros


Publicado por: 2bdesign


11



  1. Igor diz:

    Link não funciona…

  2. 2bdesign diz:

    Pode fazer download agora.
    Abraço
    2bdesign

  3. Igor diz:

    Muito obrigado pela atenção, mas o link atual é para o download de outro slideshow. Aguardo o link correto. Obrigado!

  4. 2bdesign diz:

    Olá Igor,

    Ainda bem que nos avisou!! Veja agora.

    Abraços
    2Bdesign

  5. Olá

    Talvez eu tenha feito alguma coisa errada mas o controle de mudança de página não está funcionando no Google Chrome.

    Obrigado
    Helio

  6. 2bdesign diz:

    Olá Hélio,

    Provavelmente falta qualquer coisa. Para testar faça o seguinte: abra no Chrome o link no final do artigo “Ver Demo”. Se estiver a funcionar bem é porque falta algo no seu código. Para resolver a situação, faça download dos ficheiros e compare-os com os seus ou use-os mesmo. Eles são gratuitos e foram criados para ajudar quem precisa.

    Bom trabalho!

    2Bdesign

  7. Obrigado pela resposta. Sim, o demo está funcionando com o Chrome. Deve ter sido algo que eu fiz, já que alterei as posições dos controles.

  8. Adilmo diz:

    Olá equipe 2bdesign,estou com um problema referente as imagens como faço para coloca-las com uma resolução 800px por 300px ? ja tentei no entanto sem sucesso poderiam por favor me orientar um grande abraço a todos.

  9. 2bdesign diz:

    Olá Adilmo,

    Para aletrar o tamanho das imagens, tem de aceder ao ficheiro css.Comece por alterar em #slides {
    width:800px;
    height:300px;

    Depois ajuste o valor em todas as tags que encontrar width 680px.

    Abraço

    2Bdesign

  10. Olá!
    Eu fiz o exemplo do tutorial, porém não consigo achar uma forma de exibir os controles que são uma seta para esquerda e uma para a direita.
    Será que podem me ajudar?

    Obrigada

  11. 2bdesign diz:

    Olá Andrea,

    Uma questão: os controlos não se encontram visíveis ou não estão mesmo lá? Ou seja, quando passa o rato no local onde eles deveriam se encontrar o cursor fica com o dedinho? Pode ser apenas uma questão de cor.

    2Bdesign


Faça um comentário