7.0 KiB
title | localeTitle |
---|---|
Guide to Build a Sliding Image Gallery | Guia para criar uma galeria de imagens deslizante |
Este tutorial irá orientá-lo na construção de um controle deslizante de imagens usando a biblioteca jQuery .
Este tutorial terá quatro partes:
HTML
Estaremos usando Bootstrap para este tutorial para manter as coisas com bom aspecto, sem gastar muito tempo.
Nossa estrutura será a seguinte:
<div class="container">
<!-- The wrapper for our slider -->
<div class="slider">
<ul class="slides"><!-- Each image will be inside this unordered list --></ul>
</div>
<div class="buttons"><!-- Pause and play buttons will go in here --></div>
</div>
Dentro de nossa ul
com a classe de slides
, teremos o seguinte:
<li class="slide"><img src="#" /></li>
<li class="slide"><img src="#" /></li>
<li class="slide"><img src="#" /></li>
<li class="slide"><img src="#" /></li>
<li class="slide"><img src="#" /></li>
Dentro da nossa classe .buttons
você deve ter o seguinte:
<button type="button" class="btn btn-default pause">
<span class="glyphicon glyphicon-pause"></span>
</button>
<button type="button" class="btn btn-default play">
<span class="glyphicon glyphicon-play"></span>
</button>
Aqui está um exemplo de como o seu html
deve ser:
Nota: Você deve substituir o atributo image
src
pelo seu próprio conteúdo.
<div class="container">
<div class="slider">
<ul class="slides">
<li class="slide"><img src="https://unsplash.it/1280/720/?image=120" /></li>
<li class="slide"><img src="https://unsplash.it/1280/720/?image=70" /></li>
<li class="slide"><img src="https://unsplash.it/1280/720/?image=50" /></li>
<li class="slide"><img src="https://unsplash.it/1280/720/?image=170" /></li>
<li class="slide"><img src="https://unsplash.it/1280/720/?image=190" /></li>
</ul>
</div>
<div class="buttons">
<button type="button" class="btn btn-default pause">
<span class="glyphicon glyphicon-pause"></span>
</button>
<button type="button" class="btn btn-default play">
<span class="glyphicon glyphicon-play"></span>
</button>
</div>
</div>
SCSS
Estamos usando o Sass e a sintaxe do SCSS para que possamos aninhar e usar variáveis
Podemos usar o seguinte SCSS para definir nosso estilo:
// Variables
$width: 720px;
.slider {
width: $width;
height: 400px;
overflow: hidden;
margin: 0 auto;
text-align: center;
.slides {
display: block;
width: 6000px;
height: 400px;
margin: 0;
padding: 0;
}
.slide {
float: left;
list-style-type: none;
width: $width;
height: 400px;
img {
width: 100%;
height: 100%;
}
}
}
.buttons {
margin: 0;
width: $width;
position: relative;
top: -40px;
margin: 0 auto;
.play {
display: none;
}
.btn {
display: flex;
margin: 0 auto;
text-align: center;
}
}
JS
Variáveis
No trecho de código a seguir, definimos variáveis usadas posteriormente em nosso código.
var animationSpeed = 1000; // How quickly the next slide animates.
var pause = 3000; // The pause between each slide.
Nós vamos usar uma variável em branco onde vamos chamar o método setInterval
:
var interval;
Animação Vamos embrulhar nossas animações deslizantes dentro de uma função:
function startSlider() {}
Estamos usando o método JavaScript nativo setInterval()
para automatizar o conteúdo da função em um acionador baseado em tempo.
interval = setInterval(function() {}, pause);
Usamos a variável de pause
para ver quantos milissegundos esperar antes de chamar a função novamente. Leia mais sobre o método setInterval
nativo aqui: https://developer.mozilla.org/pt-BR/docs/Web/API/WindowTimers/setInterval. Dentro de nossa função, usaremos o jQuery para desbotar entre os slides na velocidade da variável animationSpeed:
$('.slides > li:first')
.fadeOut(animationSpeed)
.next()
.fadeIn(animationSpeed)
.end()
.appendTo('.slides');
-
Estamos segmentando o primeiro slide usando
$('.slides > li:first')
. -.fadeOut(animationSpeed)
fará desaparecer o primeiro slide e, em seguida, usando.next()
, passamos para o próximo slide. - Uma vez que nos mudamos para o próximo slide, faremos o seguinte em:.fadeIn(animationSpeed)
. - Esta sequência continuará até o último slide (.end()
), então paramos a animação. Vamos agora chamar a funçãostartSlider
para iniciar a animação:startSlider ();
Reproduzir e pausar Esse recurso é opcional, mas muito fácil de implementar. Vamos esconder o botão play, por isso não vemos os botões play e pause:
$('.play').hide(); // Hiding the play button.
Vamos agora criar o nosso botão de pausa (mostrado automaticamente no carregamento da página):
$('.pause').click(function() {
clearInterval(interval);
$(this).hide();
$('.play').show();
});
-
Vamos chamar nossa função toda vez que o botão de pausa for clicado usando jQuery. -
clearInterval
o intervalo usando o métodoclearInterval
e usando nossa variável deinterval
como parâmetro, indicando qual intervalo interromper. - Como o controle deslizante está pausado,$(this).hide();
o botão de pausa usando$(this).hide();
. Nota: estamos usandothis
, que se refere ao que nosso pai está chamando, ou seja,.pause
. - Em seguida, mostraremos nosso botão de reprodução para que o usuário possa retomar a animação:$('.play').show();
. O código a seguir configura nosso botão de reprodução (ocultado automaticamente no carregamento da página):('. play'). click (function () { startSlider ();
(this) .hide (); $ ('. pause'). show (); }); -
Vamos chamar nossa função toda vez que o botão de reprodução for clicado usando jQuery.
- Vamos iniciar ou reiniciar o intervalo usando a função
startSlider
. - Como o controle deslizante está sendo reproduzido no momento, ocultaremos o botão de reprodução usando
$(this).hide();
. Nota: estamos usandothis
, que se refere ao que nossos pais estão chamando, ie.play
. - Em seguida, mostraremos nosso botão de pausa para que o usuário possa interromper a animação à vontade:
$('.pause').show();
.
- Vamos iniciar ou reiniciar o intervalo usando a função