Skip to content

Instantly share code, notes, and snippets.

@WesleiRamos
Last active August 5, 2018 18:01
Show Gist options
  • Save WesleiRamos/e9ee98d745538d7fc89bdae9e211c808 to your computer and use it in GitHub Desktop.
Save WesleiRamos/e9ee98d745538d7fc89bdae9e211c808 to your computer and use it in GitHub Desktop.
Simples slide
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>slide exemplo</title>
<style>
/* reseta o padding e margin, sempre faço isso **/
* { padding: 0; margin: 0; }
/* apenas para deixar os elementos centralizados **/
body {
display: flex;
justify-content: center;
overflow: hidden;
}
.slide {
/* apenas pra mostrar os limites*/
border: 1px solid red;
height: 150px;
/* descomente o overflow e veja o que acontece */
/*overflow: hidden;*/
width: 200px;
white-space: nowrap;
}
.slide__elemento {
/* alinhar verticalmente */
align-items: center;
border: 1px solid gray;
/*
inline-flex pra deixar o texto centralizado,
mas você pode trocar pra inline-block da na mesma
*/
display: inline-flex;
height: 100%;
/* alinhar horizontalmente */
justify-content: center;
margin: 0 0;
transition: 0.5s;
width: 100%;
}
.slide__elemento:not(:first-child) {
margin-left: -4px;
}
</style>
</head>
<body>
<div>
<div class="slide">
<div class="slide__elemento">1</div>
<div class="slide__elemento">2</div>
<div class="slide__elemento">3</div>
<div class="slide__elemento">4</div>
<div class="slide__elemento">5</div>
<div class="slide__elemento">6</div>
<div class="slide__elemento">7</div>
<div class="slide__elemento">8</div>
<div class="slide__elemento">9</div>
</div>
<div style="margin-top: 20px">
<button onclick="anterior()"><</button>
<button onclick="proximo()">></button>
</div>
</div>
<script type="text/javascript">
/**
* Guardaremos qual elemento está sendo mostrado, a quantidade de elementos
* a largura do "conteiner" do slide e o primeiro elemento que
* será movimentado pra esquerda ou direita conforme o comando de avançar e voltar
*/
let elementoMostrado,
quantidadeDeElementos,
larguraDosElementos,
primeiroElemento;
function proximo() {
/*
* Faz com que não avance caso não tenha mais nenhum pra avançar
*/
if (elementoMostrado === (quantidadeDeElementos - 2) * -1) return;
elementoMostrado--;
movimentar();
}
function anterior() {
/*
* Faz com que não volte caso não tenha mais nenhum pra voltar
*/
if (elementoMostrado === 1) return;
elementoMostrado++;
movimentar();
}
function movimentar() {
/**
* Vamos "empurrar" ou "puxar" o primeiro elemento na horizontal
* para que o elemento da vez seja mostrado, por exemplo
* se quisermos mostrar o 3 elemento então temos que mover o primeiro elemento
* pra esquerda 2 * a largura dos elementos
*/
let novoMarginLeft = (elementoMostrado - 1) * larguraDosElementos;
primeiroElemento.style.marginLeft = novoMarginLeft.toString() + 'px';
}
window.addEventListener('load', function() {
elementoMostrado = 1,
quantidadeDeElementos = document.querySelectorAll('.slide__elemento').length,
larguraDosElementos = 202,
primeiroElemento = document.querySelector('.slide__elemento:first-child');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment