E porque não mais um slideshow?
Este, prometemos ser super simples, para poder ser usado em banners, por exemplo, sem controlos, botões, mas somente com efeito desvanecer. Como fazemos isso apenas em HTML5 / CSS3? Temos de usar um pouquinho de Jquery para fazer o processo despoletar. Mas pode ser usado nas mais variadíssimas circunstâncias, até mesmo para blocos publicitários.
Para começar, usamos o seguinte código HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<title>Slideshow Super Simples</title>
A linha abaixo serve para carregar o ficheiro de estilos (CSS):
<link href=”estilos.css” rel=”stylesheet” type=”text/css”>
A linha abaixo carrega uma imagem para o caso de alguns utilizadores que não têm o javascript:
<div id=”slideshow-div” class=”rs-slideshow”>
<div class=”slide-container”>
<img src=”imagens/01.jpg” alt=”paisagem 1″>
</div>
Agora criamos todas as imagens que serão lançadas no slideshow:
<ol class=”slides”>
<li>
<a href=”imagens/02.jpg”>2</a>
</li>
<li>
<a href=”imagens/03.jpg”>3</a>
</li>
<li>
<a href=”imagens/04.jpg”>4</a>
</li>
<li>
<a href=”imagens/05.jpg”>5</a>
</li>
</ol>
</div>
Por fim, os ficheiros Java:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<script src=”js/jquery.rs.slideshow.js”></script>
<script src=”js/bootstrap.js”></script>
</body>
</html>
Código HTML final:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<title>Slideshow Super Simples</title>
<link href=”estilos.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=”slideshow-div” class=”rs-slideshow”>
<div class=”slide-container”>
<img src=”imagens/01.jpg” alt=”paisagem 1″>
</div>
<ol class=”slides”>
<li>
<a href=”imagens/02.jpg”>2</a>
</li>
<li>
<a href=”imagens/03.jpg”>3</a>
</li>
<li>
<a href=”imagens/04.jpg”>4</a>
</li>
<li>
<a href=”imagens/05.jpg”>5</a>
</li>
</ol>
</div>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<script src=”js/jquery.rs.slideshow.js”></script>
<script src=”js/bootstrap.js”></script>
</body>
</html>
Código CSS:
O bloco abaixo formata a area que irá o slideshow:
.rs-slideshow {
border: 12px solid #444;
height: 240px;
width: 520px;
margin: 24px auto;
overflow: hidden;
position: relative;
}
Abaixo formatamos a área que incorpora as imagens do slideshow:
.rs-slideshow .slide-container {
background-color: #444;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
O bloco de código abaixo formata as imagens do slideshow:
.rs-slideshow .slide-container img {
position: absolute;
}
.rs-slideshow .slides {
display: none;
}
Código CSS:
@charset “utf-8”;
.rs-slideshow {
border: 12px solid #444;
height: 240px;
width: 520px;
margin: 24px auto;
overflow: hidden;
position: relative;
}
.rs-slideshow .slide-container {
background-color: #444;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
.rs-slideshow .slide-container img {
position: absolute;
}
.rs-slideshow .slides {
display: none;
}
Não se esqueçam dos códigos JavaScript que carregámos no HTML e que podem fazer download junto com todos os ficheiros do slideshow:
Prometeram e cumpriram em grande estilo. Parabéns. Já estou adaptando para meu site. Era o que eu precisava. Agora uma perguntinha sobre o Jquery 1.7.1 : Não seria mais seguro eu copiar seu conteúdo para minha pasta JS ao invés de deixa-lo linkado? Vai que…
Olá Washington,
Como provém de um alojamento seguro não costuma haver problema, mas é uma opção.
2Bdesign