Neste artigo vamos ver como criar facilmente um simples slideshow, usando apenas HTML, CSS e o jQuery. No final teremos um slideshow com vários efeitos, muito suave, autoPlay automático, entre muitas outras funcionalidades, muito simples mas muito atrativo e funcional…
Escolher a melhor apresentação de slides ou plugins jQuery de galeria pode ser um problema, devido a grande quantidade que podemos encontrar na Internet e principalmente ao peso que têm ao carregar a pagina. No entanto podemos contornar isso, criando o nosso próprio slideshow.
Alem de não perdemos tempo em pesquisas, podemos poupar também os recursos do nosso site. Com este simples código você poderá aproveitar e melhorar a apresentação das suas imagens em seu site. veja o a seguir o código que usamos.
Veja o video deste artigo:
O código HTML, CSS e JAVASCRIPT:
-
Clique para ver o HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SlideShow com jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
</head>
<body>
<section id="galeria">
<div class="conteudo">
<ul id="imagens">
<li class="fade ativa">
<span class="numero">1 / 5</span>
<img src="imagens/1.jpg" alt="imagem 1" class="imagem-responsiva">
<span class="texto">Texto da imagem 1</span>
</li>
<li class="fade">
<span class="numero">2 / 5</span>
<img src="imagens/2.jpg" alt="imagem 2" class="imagem-responsiva">
<span class="texto">Texto da imagem 2</span>
</li>
<li class="fade">
<span class="numero">3 / 5</span>
<img src="imagens/3.jpg" alt="imagem 3" class="imagem-responsiva">
<span class="texto">Texto da imagem 3</span>
</li>
<li class="fade">
<span class="numero">4 / 5</span>
<img src="imagens/4.jpg" alt="imagem 4" class="imagem-responsiva">
<span class="texto">Texto da imagem 4</span>
</li>
<li class="fade">
<span class="numero">5 / 5</span>
<img src="imagens/5.jpg" alt="imagem 5" class="imagem-responsiva">
<span class="texto">Texto da imagem 5</span>
</li>
</ul>
<div id="botoes">
<a href="" id="seguinte">❯</a>
<a href="" id="anterior">❮</a>
</div>
</div>
<div id="dots">
<span class="dot ativo"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</section>
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html> -
Clique para ver o CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
* { margin: 0; padding: 0; }
* { box-sizing: border-box }
body { font-family: 'Open Sans', Verdana, sans-serif; }
#galeria {
background-color: #fff;
text-align: center;
}
.conteudo {
background-color: #f5f5f5;
max-width: 1170px;
position: relative;
margin: auto;
overflow: hidden;
z-index: 0;
}
.conteudo ul {
margin: 0;
padding: 0;
}
.conteudo ul li {
display: none;
list-style:none;
position: relative;
z-index: 1;
}
.conteudo ul li.active {
display: block;
}
img { vertical-align: middle; }
.imagem-responsiva{ width: 100%; height: auto;}
.texto {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
background-color: rgba(0,0,0,0.4);
bottom: 8px;
left: 0;
width: 100%;
text-align: center;
}
.numero {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
#botoes {}
/* Next & previous buttons */
#anterior, #seguinte {
cursor: pointer;
text-decoration: none;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
background-color: rgba(0,0,0,0.8);
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 13px 13px 0;
z-index: 3;
}
#anterior {
left: 0;
}
#seguinte {
right: 0;
border-radius: 13px 0 0 13px;
}
#anterior:hover, #seguinte:hover {
background-color: rgba(0,0,0,0.4);
}
#dots {
display: block;
clear: both;
margin: auto;
padding: 20px 0;
text-align: center;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: rgba(0,0,0,0.4);
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: rgba(0,0,0,0.8);
}
/* Animations */
.fade {-webkit-animation-name: fade;-webkit-animation-duration: 1.5s;animation-name: fade;animation-duration: 1.5s;}@-webkit-keyframes fade {from {opacity: .4} to {opacity: 1}}@keyframes fade {from {opacity: .4} to {opacity: 1} }
.fadeIn{animation-name:fadeIn;-webkit-animation-name:fadeIn;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible!important}@keyframes fadeIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1)}80%{transform:scale(0.9);opacity:1}100%{transform:scale(1);opacity:1}}@-webkit-keyframes fadeIn{0%{-webkit-transform:scale(0);opacity:0}60%{-webkit-transform:scale(1.1)}80%{-webkit-transform:scale(0.9);opacity:1}100%{-webkit-transform:scale(1);opacity:1}}
.bigEntrance{animation-name:bigEntrance;-webkit-animation-name:bigEntrance;animation-duration:1.6s;-webkit-animation-duration:1.6s;animation-timing-function:ease-out;-webkit-animation-timing-function:ease-out;visibility:visible!important}@keyframes bigEntrance{0%{transform:scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);opacity:.2}30%{transform:scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);opacity:1}45%{transform:scale(0.98) rotate(1deg) translateX(0%) translateY(0%);opacity:1}60%{transform:scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);opacity:1}75%{transform:scale(0.99) rotate(1deg) translateX(0%) translateY(0%);opacity:1}90%{transform:scale(1.01) rotate(0deg) translateX(0%) translateY(0%);opacity:1}100%{transform:scale(1) rotate(0deg) translateX(0%) translateY(0%);opacity:1}}@-webkit-keyframes bigEntrance{0%{-webkit-transform:scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);opacity:.2}30%{-webkit-transform:scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);opacity:1}45%{-webkit-transform:scale(0.98) rotate(1deg) translateX(0%) translateY(0%);opacity:1}60%{-webkit-transform:scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);opacity:1}75%{-webkit-transform:scale(0.99) rotate(1deg) translateX(0%) translateY(0%);opacity:1}90%{-webkit-transform:scale(1.01) rotate(0deg) translateX(0%) translateY(0%);opacity:1}100%{-webkit-transform:scale(1) rotate(0deg) translateX(0%) translateY(0%);opacity:1}}
@media only screen and (max-width: 300px) {
.anterior, .seguinte, .texto {font-size: 11px;}
} -
Clique para ver o JAVASCRIPT
$(window).on('load', function() {
console.log('All assets are loaded')
var imagens = $("#imagens").children('li'),
dot = $("#dots").children('span'),
numImagens = imagens.length,
tempo = 3500,
rodar = setInterval(autoPlay, tempo),
i = 0,
a;
function imagemSeguinte() {
imagens.eq(i).removeClass('active');
dot.eq(i).removeClass('active');
i = ++i === numImagens ? 0 : i;
imagens.eq(i).addClass('active');
dot.eq(i).addClass('active');
};
function imagemAnterior() {
imagens.eq(i).removeClass('active');
dot.eq(i).removeClass('active');
i = --i === -1 ? numImagens -1 : i;
imagens.eq(i).addClass('active');
dot.eq(i).addClass('active');
};
function mudarImagem( i, a ) {
clearInterval(rodar);
// remover
imagens.eq(a).removeClass('active');
dot.eq(a).removeClass('active');
// adicionar
imagens.eq(i).addClass('active');
dot.eq(i).addClass('active');
rodar = setInterval(autoPlay, tempo);
};
$('.conteudo').hover(function(){
$('#botoes').fadeIn(300);
clearInterval(rodar);
}, function(){
$('#botoes').fadeOut(300);
rodar = setInterval(autoPlay, tempo);
});
$('#anterior, #seguinte').on('click', function (e) {
e.preventDefault();
if( this.id === 'seguinte' ) {
imagemSeguinte();
} else {
imagemAnterior();
}
});
$('.dot').on('click', function (e) {
e.preventDefault();
i = $(this).index();
a = $('#dots').children('span.active').index();
mudarImagem( i, a );
});
function autoPlay() {
$('#seguinte').click();
}
});
Muito útil, não acha? Costuma usar jquery e criar os seus slideshows?