Last active
August 5, 2018 18:01
-
-
Save WesleiRamos/e9ee98d745538d7fc89bdae9e211c808 to your computer and use it in GitHub Desktop.
Simples slide
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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