Skip to content

Instantly share code, notes, and snippets.

@overclock11

overclock11/slider-simple.html

Created May 17, 2018 22:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save overclock11/749d8715bf07ea23cc7c442a4a8b0f50 to your computer and use it in GitHub Desktop.
Save overclock11/749d8715bf07ea23cc7c442a4a8b0f50 to your computer and use it in GitHub Desktop.
Download ZIP
slider simple con html y javascript puro
Raw
slider-simple.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.anchoMaximo{
max-width: 100%;
height: 300px;
}
.container{
overflow: hidden;
width: 600px;
}
.anchoInfinito{
white-space: nowrap;
position:relative;
transition:all 0.5s;
left:0px;
}
.controles{
position:absolute;
width:100%;
height:100%;
}
</style>
<script>
function izquierda (){
let elemento = document.getElementById("contenedor");
let estilos = window.getComputedStyle(elemento,null)
let posicion = estilos.getPropertyValue("left")
let suma = parseInt(posicion) + 300;
console.log(suma);
if(suma>600){ // 600 determina el numero maximo de pixeles que corre antes de volver a cero
elemento.style.setProperty("left",0);
}else{
elemento.style.setProperty("left",suma+"px");
}
}
function derecha(){
let elemento = document.getElementById("contenedor");
let estilos = window.getComputedStyle(elemento,null)
let posicion = estilos.getPropertyValue("left")
let suma = parseInt(posicion) - 300;
console.log(suma);
if(suma===-1200){ // 1200 determina el numero maximo de pixeles que corre antes de volver a cero
elemento.style.setProperty("left",0);
}else{
elemento.style.setProperty("left",suma+"px");
}
}
</script>
</head>
<body>
<div class="container">
<div class="anchoInfinito" id="contenedor">
<img class="anchoMaximo" src="https://www.anipedia.net/imagenes/gatos-800x375.jpg" alt="">
<img class="anchoMaximo" src="https://www.anipedia.net/imagenes/caracteristicas-generales-de-los-gatos.jpg" alt="">
<img class="anchoMaximo" src="https://www.anipedia.net/imagenes/donde-viven-los-gatos.jpg" alt="">
<img class="anchoMaximo" src="https://www.anipedia.net/imagenes/accesorios-gatos-800x375.jpg" alt="">
</div>
</div>
<div id="controles">
<div class="controles">
<button onclick="izquierda()"> i </button>
<button onclick="derecha()"> D </button>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment